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 

why getting rid of shallow?

https://kentcdodds.com/blog/why-i-never-use-shallow-rendering

>>>...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 💻

Made with Slides.com