UPGRADING REDUX LIBRARIES
AND THINGS I LEARNED ALONG THE WAY
Upgrading Redux to v4
Upgrading react-redux to v6
Upgrading react-redux to v7
All v6 problems + open issue on GitHub.
- Enzyme shallow not supported the same way, as dive method is not supported anymore.
- Enzyme shallow cannot work with redux hooks or context hooks.
...there's a workaround to solve issue with react-redux v7
but first we need to solve all issues with react-redux v6
jest.mock('../../node_modules/react-redux/lib/utils/batch.js', () => ({
setBatch: jest.fn(),
getBatch: () => fn => fn()
}));How do we do this?
our options
- Get rid of all our shallow tests and make them completely mounted.
- Get rid of enzyme and use react-testing-library (Jest first recommended)
- React-testing-library does not support shallow rendering.
- We would need to get rid of shallow
- React-testing-library does not support shallow rendering.
why getting rid of shallow?
>>>...why I never use shallow rendering... With shallow rendering, I can refactor my component's implementation and my tests break. With shallow rendering, I can break my application and my tests say everything's still working. - @kentcdodds
let's see Dan Abramov's opinion on this...
and we can always do what he says
Recap
- We can keep the shallow tests and keep the same redux and react-redux libraries.
- We can change our shallow tests little by little until we are ready to upgrade.
Transitioning from shallow rendering:
https://youtu.be/LHUdxkThTM0?list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u
but we've also talked about testing the past week
Testing React Components with react-test-renderer and the Act API:
https://www.valentinog.com/blog/testing-react/
Unit testing React components:
https://medium.com/javascript-scene/unit-testing-react-components-aeda9a44aae2
Write tests. Not too many. Mostly integration.
https://kentcdodds.com/blog/write-tests
Efficiency
Efforts
Reliable
We don't have any integration tests
Let's make some integration tests!
Enzyme
We need to replicate our store and stop trusting Enzyme to render our components in an "isolate" mode.
- Unit test the components
- Integrate test the containers (with lifecycle)
Testing library
This library directly prevents us from doing isolated tests. Remember that every test can be unit or integration.
- As this renders everything, we can easily interact with DOM (jsdom) and see changes.
- More reliable.
- Need to learn this library and could slow us.
Let's see the code 💻
upgrading redux libraries
By Lucas Bernalte
