Two Ways to Run Tests on Different Versions of The Same Library F.E. React 17 + React 16

How can you run tests on version X and version Y of a library, with real-world examples of testing React 16 and React 17

With the release of React 17, many React library maintainers found themselves wondering:

The First Way: Yarn Aliases

This is the approach I decided to use in the end.

A screenshot from node modules where react-16 is installed along with react
A screenshot from node modules where react-16 is installed along with react
A screenshot from my node_modules folder where react version 16 is installed along with version 17
"test:react-17": "jest --config=jest.config.js",
"test:react-16": "USE_REACT_16=true jest --config=jest.config.js",
"test": "yarn test:react-17 && yarn test:react-16"

Manual Mocking

We can also manually mock dependencies. It might be useful in more complicated cases where we would like to have more control over how the packages are being aliased.

The Other Way: Separate Folder

That’s actually the first way that truly worked for me. I didn’t like it because it felt too hacky and vulnerable. But I think we can learn a lot from understanding how it works. I can see this way actually being useful in certain scenarios and frameworks.

"prepare": "cd test-react-16 && yarn",
  • The folder’s node_modules takes precedence over the main node_modules using the moduleDirectories setting.
The other folder with its own node_modules
"test:react-17": "jest --config=jest.config.js",
"test:react-16": "cd test-react-16 && jest --config=jest.config.js",
"test": "yarn test:react-17 && yarn test:react-16"

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store