Skip to main content

Testing

Testing Tools​

To be able to run tests we need a Test Runner. React comes with jest, a very popular testing library for unit testing. Jest not only executes our tests, but also provides the validation library and other useful extensions, like code coverage.

To be able to write test effectively we have to use some Testing Utilities. These utilities help us "simulate" the React app (mounting of components + selecting elements). React comes with React Test Utils, but this gives you only the bare minimum to test your app. On top of that you should use React Testing Library aka RTL. Another popular tool is Enzyme.

As Enzyme encourages or enables poor testing practices, e.g. testing implementation and shallow rendering, you should be using RTL. This is also the official recommendation of Facebook. The difference of these tools is outlined below.

React Testing Library​

The intention of this library is Blackbox Testing. Meaning it only renders, by using the React Renderer which needs the DOM, the components and provides utility methods to interact with them. The idea is that you should communicate with your application in the same way a user would. So in a way it leans more towards integration testing and less towards unit testing, although you can write unit tests by mocking other components (see this link).

Therefore it doesn't give you any access to the implementation details. So rather than set the state of a component you reproduce the actions a user would do to reach that state.

Enzyme​

With Enzyme you can test the implementation (Whitebox Testing). Enzyme allows you to access the internal workings of your components. You can read and set the state, and you can mock children to make tests run faster. Also it offers custom renderers for shallow rendering, meaning you can just render the component at hand and not its children. In this way your testing code strictly focuses on one component, because you should test isolated units.

Because the implementation can and likely will change over time (du to refactorings), you should primarily test the functionality/behaviour (do Blackbox Testing).

Unit Testing​

Dependencies​

In your package.json you should have these devDependencies:

    "jest-environment-jsdom-sixteen": "^1.0.3",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1"

You can run your tests via react-scripts test --env=jest-environment-jsdom-sixteen --coverage --watchAll.

If you want to use enzyme instead you have to install the following 3 dependencies via: npm i enzyme react-test-renderer enyzme-adapter-react-16