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

Question

[anamorph]

Есть кнопка, при нажатии на которую она отдает какой-то экшн и меняет свой текст вместо 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 ...
 })

Answer 1

[Олег Драпеза]

На самом деле вам не нужно это тестировать.

Разделяйте тестирование частей 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' });

Answer 2

[Ваге]

// ....
const wrapper = shallow(<Button/>);
wrapper.find('button').simulate('click');

//....