How to test what happens after a button is clicked in React(Jest, enzyme)?

Question

JavaScript

There is a button, when pressed, it gives some kind of action and changes its text instead of save to saving for a couple of seconds
btn.simulate('click') does not give the desired result. In the test, as the text Save remained, it remains

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

You don't really need to test this.
Separate testing parts of a React + Redux app:
1) Separate the reducer and the corresponding actions, which is very easy to do, since these are pure functions and simple objects.
2) A separate react component, and you only need to check that when simulate('click') the corresponding handler is called.
Example:

const props = {
    onClick: jest.fn()
};
let component;

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

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

If you need to check if a component reacted to a change in its properties, then you change its properties directly via component.setProps({ key: 'value' });

Answer 2

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

//....