anamorph
@anamorph
javascriptLover

Как протестить то, что случится после нажатия кнопки в React(Jest, enzyme)?

Есть кнопка, при нажатии на которую она отдает какой-то экшн и меняет свой текст вместо save на saving на пару секунд
btn.simulate('click') нужного результата не дает. В тесте как оставался текст Save так и остается
it('click on save-button should change inner text', () => {
     console.log(saveBtn.props().submitting)  // false и значит текст Save
    saveBtn.props().onClick() // или saveBtn.simulate('click') 
    console.log(saveBtn.props().submitting)  // false и значит текст Save, но должен быть true, а текст Saving ...
 })
  • Вопрос задан
  • 1947 просмотров
Решения вопроса 1
@SuperOleg39ru
Front-end разработчик
На самом деле вам не нужно это тестировать.

Разделяйте тестирование частей React + Redux приложения:

1) Отдельно reducer и соответствующие actions, что делать очень просто, так как это чистые функции и простые объекты.

2) Отдельно react компонент, и вы должны проверить только то, что при simulate('click') вызовется соответствующий обработчик.
Пример:
const props = {
    onClick: jest.fn()
};
let component;

beforeEach(() => {
    component = enzyme.shallow(<Button {...props} />);
});

it('срабатывает событие onClick', () => {
    field.simulate('click');
    expect(props.onClick).toHaveBeenCalled();
});


Если вам нужно проверить, отреагировал ли компонент на изменение его свойств, то вы меняете его свойства напрямую через component.setProps({ key: 'value' });
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
vahe_2000
@vahe_2000
// ....
const wrapper = shallow(<Button/>);
wrapper.find('button').simulate('click');

//....
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы