Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Enzyme/Jest React Testing - Shallow connected component with react-redux > 6

We use Enzyme and Jest for testing. Updated to the latest version of react-redux in our code base, and all of the connected component test cases started failing (Version 6). Using

import { createMockStore } from 'redux-test-utils';

to create store

Test cases that worked with older version:

const wrapper = shallow(<SomeConnectedComponent />, {context: { store }});

This fails giving error

Invariant Violation: Could not find "store" in the context of "Connect(SomeConnectedComponent )".

Reading few posts, got a suggestion to mount and wrap with provider wrapper

const wrapper = mount(<Provider store={store}><SomeConnectedComponent /></Provider>);

Above code works, but I want it to work with swallow for unit testing.

Edit :

const wrapper = shallow(<Provider store={store}>
<SomeConnectedComponent />
</Provider>)

Above code returns empty shallowWraper object.

What is the best way to swallow connected component with react-redux version > 6

like image 839
Sunny Avatar asked Dec 05 '19 08:12

Sunny


People also ask

Is it possible to use shallow testing with React-Redux 6?

And there is another workaround if prefer testing the component as unconnected component, you can still use react-redux 6 and use shallow; code can be rewritten as follows: Hope this helps! Thanks for contributing an answer to Stack Overflow!

Can you test React components with Redux hooks?

Testing components with Redux hooks The approach presented above is also compatible when using React Redux hooks and selectors, as long as they use the data we provide them in the state. This is the true advantage of the React Testing Library. No matter what you use for connecting your component to Redux.

What is react testing library?

Its main goal is to test components the same way user will use them in your application. Of course, the same is possible with other testing libraries like Enzyme, but React Testing Library is very strict about it and doesn't allow to access the internals of your component. Enough with theory. Let's write some tests!

How to test React-Redux components?

* Test just the React component alone, you test the dumb component. * Test React-Redux part of the component, then test the connected component. Don’t use decorator @connect to test. You should not use decorators to connect your component as shown below:- To test the dumb component, include


Video Answer


2 Answers

shallow does work on redux 7 but the implementation changed. so instead of

const wrapper = shallow(<Provider store={store <SomeConnectedComponent/></Provider>)

you now do

const wrapper = shallow(<SomeConnectedComponent store={store}/>)

Wrapping in a provider is no longer necessary and prevents unnecessary dives. You are then able to traverse the shallow wrapper like so:

wrapper.children().dive().find(<ChildComponent>))
like image 152
andre ogara Avatar answered Oct 19 '22 19:10

andre ogara


Shallow does not work with the latest version of react-redux. From Version 6.x, it causes the mentioned problem.

The best solution I found was to use a older version of react-redux for testing, and the newer one for actual code.

1) Add the older version as a dev dependency. Because a newer version of react-redux is there you will need to use a alias. This can be any version 5.x This will install "react-redux-test"

yarn add react-redux-test@npm:[email protected] -D

2) Under the _ mocks _ folder, create a new file react-redux.js and export the older version from within

export * from 'react-redux-test';

This mock will be used in every test case file by default, so the old testing code no longer breaks.

If however you want to test with the new react-redux library, you can use

jest.unmock('react-redux')

above the new test file.

After upgrading there were hundreds of tests failing, this approach works for me as i want to use the Hooks Api in new components as well.

This way you can use features the new library until enzyme / react-redux come up with a fix.

like image 26
Sunny Avatar answered Oct 19 '22 17:10

Sunny