Enzyme: How to test props change of a container component? - reactjs

Question

To render the container component connected to redux store, I'm using this function to render the component
function render(Component, props, storeData) {
const mockStore = configureStore([thunkMiddleware]);
const store = mockStore(storeData);
return mount(
<Provider store={store}>
<Component {...props} />
</Provider>
);
}
Now, I need to test the props change of the Component rendered but it looks like ReactWrapper.setProps only works for the Root component.
MyComponent is a container component that is connected to store using connect.
describe('MyComponent', () => {
it('should work at props change', () => {
const wrapper = render(MyComponent, { value: 1 }, initialStoreValue);
wrapper.find(MyComponent).setProps({ value: 2});
// then expect something.
});
});

Answer 1

Few things to consider:
redux-mock-store allows to pass a function as state source - redux-mock-store will call that function every time
to trigger re-rendering component with useSelector or connect() we can just dispatch() with any action type. Literally any.
We need to wrap updating store into act() or otherwise it might not work and definitely will complain with console.error.
So keeping that in mind we can enhance render:
function render(Component, props, initialStoreData) {
let currentStoreData = initialStoreData;
const mockStore = configureStore([thunkMiddleware]);
const store = mockStore(() => currentStoreData);
const wrapper = mount(
<Provider store={store}>
<Component {...props} />
</Provider>
);
const updateStore = (newStoreData) => {
currentStoreData = newStoreData;
act(() => {
store.dispatch({ type: '' }); // just to trigger re-rendering components
});
}
return { wrapper, updateStore };
}
And then in test:
describe('MyComponent', () => {
it('does something when store changes somehow', () => {
const { wrapper, updateStore } = render(MyComponent, { value: 1 }, initialStoreValue);
updateStore({ someReduxValue: 2});
// then expect something.
});
});