score:4

Accepted answer

I think I have found the problem.

The redux-mock-store library doesn't allow to test the state change. The component inside is changing the "real" store state and not the mocked one but it is using the mocked store state when rendering which doesn't change.

In this test I don't need to pass an initial store different from the original and I can use the "real" store without mocking it:

 import {render} from '@testing-library/react'
 import store from 'path_to_the_app_store_obj';
 
 it('shows the name', async () => {
   const {findByText} = render(
        <Provider store={store}>
            <HelloComponent />
        </Provider>
    );
   expect(await findByText('Hello John')).toBeInTheDocument();
 });

Using the original store the test works.

In addition, sometimes you may want to wait for the store to change, in these cases, I found it useful to add:

 await act(() => sleep(500));

after fired the store action and before the "expect".


Related Query

More Query from same tag