React Enzyme setState не работает при попытке тестирования с помощью mount

Question

Я пытаюсь проверить этот блок кода в моем приложении React с Jest и Enzyme:

  openDeleteUserModal = ({ row }: { row: IUser | null }): any => (
    event: React.SyntheticEvent
  ): void => {
    if (event) event.preventDefault();
    this.setState({ userToDelete: row, isDeleteUserModalOpen: true });
  };

Это тест:

    describe('OpenDeleteUserModal', () => {
      let wrapper: ReactWrapper;
      let instance: any;
      beforeEach(() => {
        wrapper = mount(
          <MemoryRouter>
            <Route render={props => <UsersOverviewScreen {...props} {...defaultProps} />} />
          </MemoryRouter>
        );
        instance = getComponentInstance(wrapper);
        instance.openDeleteUserModal({ user: mockUser });
        wrapper.update();
      });
      it('should SET the isDeleteUserModalOpen to true', () => {
        expect(instance.state.isDeleteUserModalOpen).toBeTruthy();
      });
      it('should SET the userToDelete to mockUser', () => {
        expect(instance.state.userToDelete).toEqual(mockUser);
      });
    });

Тест и файл .tsx, что означает, что необходим весь шаблон для React Router. Я получаю ложное и неопределенное значение вместо истинного.

Я пытался смоделировать щелчок, но безуспешно. Смотрите ниже:

      it('should SET the isDeleteUserModalOpen to true', () => {
        const deleteUserButton = wrapper.find('renderUsers').find('button');
        deleteUserButton.simulate('click');
        jest.spyOn(instance, 'openDeleteUserModal');
        instance.openDeleteUserModal();
        expect(instance.openDeleteUserModal).toHaveBeenCalled();
        expect(instance.state.isDeleteUserModalOpen).toBeTruthy();
      });

Может кто-нибудь помочь мне понять, почему это не получается.

Answer 1

Я проходил ферментный тест github Образец ферментных тестов . Попробуйте это

describe('OpenDeleteUserModal', () => {
  let wrapper: ReactWrapper;
  let instance: any;
  beforeEach(() => {
    wrapper = mount(
      <MemoryRouter>
        <Route render={props => <UsersOverviewScreen {...props} {...defaultProps} />} />
      </MemoryRouter>
    );
    instance = getComponentInstance(wrapper);
    instance.openDeleteUserModal({ user: mockUser });
    // wrapper.update(); --don't think this is required but do check!
  });
  it('should SET the isDeleteUserModalOpen to true', () => {
    //expect(instance.state.isDeleteUserModalOpen).toBeTruthy();
    expect(wrapper.state('isDeleteUserModalOpen')).toBeTruthy();
  });
  it('should SET the userToDelete to mockUser', () => {
    //expect(instance.state.userToDelete).toEqual(mockUser);
    expect(wrapper.state('userToDelete')).toEqual(mockUser);
  });
});

Это наиболее вероятно, потому что setState () является асинхронной операцией. Когда ваш Тестовая строка запускает соответствующее состояние, возможно, не было инициализировано. Фермент, похоже, предоставил API для этого.

Для второй части это небольшая оговорка в Enzyme при тестировании функций стрелок. Оформить заказ мой ответ здесь . Следующий код должен решить вашу проблему.

 it('should SET the isDeleteUserModalOpen to true', () => {
    const deleteUserButton = wrapper.find('renderUsers').find('button');
    deleteUserButton.simulate('click');

    //this returns an object which will record interactions on 'openDeleteUserModal'
    const spy = jest.spyOn(instance, 'openDeleteUserModal');
    //Force update on the component is required for the spy to 'latch onto' an arrow function
    instance.forceUpdate();

    instance.openDeleteUserModal();

    //You have to check your spy object not the instance method
    expect(spy).toHaveBeenCalled();

    expect(instance.state('isDeleteUserModalOpen')).toBeTruthy();
  });