Как вы используете Enzyme для проверки изменений в компоненте React Hooks после onClick? - PullRequest
Новая
       5

Как вы используете Enzyme для проверки изменений в компоненте React Hooks после onClick?

0 голосов
/ 16 января 2020

Я пытаюсь написать простой интеграционный тест в моем проекте 100% React Hooks (React v16.12) с Enzyme (v3.10), Jest (v24.0) и TypeScript, где, если я нажимаю компонент кнопки в моем Контейнер приложения, другой компонент, отображающий счетчик, будет go увеличен на единицу. Текущее значение счетчика хранится в состоянии контейнера приложения (см. Фрагменты ниже).

По сути, я mount компонент приложения, чтобы отобразить его дочерние элементы, затем попытаться смоделировать нажатие кнопки с энзимом и проверьте реквизиты счетного компонента дисплея, чтобы увидеть, увеличилось ли его значение. Но ничего не происходит. Мало того, что обработчик onClick не вызывается, но я, кажется, не могу получить value prop, который я передаю компоненту PaperResource. Поэтому я не могу проверить изменения показаний счетчика, когда нажимаю на кнопку в своем тесте интеграции с ферментом! В тесте утверждается, что значение value изменяется от 0 до 1, но это утверждение не выполняется без ошибок для каждого отдельного кода. Это потому, что поддержка Enzyme для Hooks все еще не реализована или я что-то делаю здесь? Когда я запускаю приложение в браузере, все работает как положено.

Вот мой интеграционный тест 

import React from 'react';
import App from './App';
import { mount, ReactWrapper } from 'enzyme';
import { act } from 'react-dom/test-utils';
import MakePaperButton from './components/MakePaperButton';
import PaperResource from './components/PaperResource';

describe('App', () => {
  let wrapper: ReactWrapper;

  beforeEach(() => {
    act(() => {
      wrapper = mount(<App />);
    });
  });

  describe('when make paper button is clicked', () => {
    beforeEach(() => {
      act(() => {
        wrapper.find('.make-paper__button').simulate('click');
      });
    });

    it('should increase paper resource', () => {
      expect(wrapper.find('.resources__paper').prop('value')).toEqual(1);
    });
  });
});

А вот мой код React 

import React, { useState } from 'react';
import './App.scss';
import MakePaperButton from './components/MakePaperButton';
import PaperResource from './components/PaperResource';

const App: React.FC = () => {
  const [ resources, setResources ] = useState({
    paper: 0,
  });

  const handleMakePaperButtonClick = () => {
    setResources({
      ...resources,
      paper: resources.paper + 1,
    });
  };

  return (
    <div className="App">
      <MakePaperButton onClick={handleMakePaperButtonClick} />
      <div className="resources">
        <PaperResource value={resources.paper} />
      </div>
    </div>
  );
}

export default App;

Мои компоненты очень просты 

// PaperResource.tsx
import React from 'react';

export default (props: { value: number }) => (
  <div className="resources__paper">
    <span>Paper: {props.value}</span>
  </div>
);

// MakePaperButton.tsx
import React from 'react';

export default (props: { onClick: () => void }) => (
  <div className="make-paper__button">
    <button onClick={props.onClick}>Make Paper</button>
  </div>
);
...