Note: If you are coming from a create-react-app application, you can ignore most of the setup sections. The create-react-app application comes with Jest as test runner and assertion library. You could add various other testing libraries such as Enzyme and React Testing Library to it. Otherwise, I would recommend to use this article to set up a minimal React with Webpack application.
As mentioned, the tutorial series will show you how to setup different testing libraries in your React application and how to use them. We will follow mostly the constraints of the testing pyramid. It says that you should write mostly unit tests, followed by several integration tests and only a few end-to-end-tests (E2E tests). However, there exists a second philosophy for React applications, because it uses components and not many functions: The second testing philosophy says that you should write “mostly integration tests and not so many unit tests”. We will come back to this topic later for the tutorial series.
React Component Tests
What are unit, integration, and end-to-end tests in a nutshell? Whereas a unit test should be able to test a piece (e.g. component) in isolation, the integration test should make sure that the piece (component) works in its context with other pieces (components). For instance, an integration test could verify that all necessary props are passed through from the tested component to a specific child component. Last but not least, end-to-end tests are testing your application in a browser environment. For instance, there you could simulate a whole sign up process by filling in a email address and a password in a form and submitting these credentials to your backend application.
Another goal of this testing tutorial series is to show you a couple of common test patterns and testing best practices which are not too complicated and can be applied throughout your application. It should help you to write your React component tests in an efficient way without having to decide every time on how to write the tests themselves. Therefore, most of your tests should follow a common pattern which you can apply throughout your components. These test pattern become even more interesting when using TDD, because you can write your tests first and your components in the second step. After all, this guide should show you a couple of React testing best practices without being too opinionated. Hopefully it will help you to understand the React testing framework landscape, how to setup these testing tools up and how to use them.
React Testing Libraries
However, if you really want to test React components the idiomatic way, you will not get around Jest. Jest was released by Facebook to test React components and brings the combined power of Mocha, Chai, Sinon and more. It is a test runner, assertion library, and offers spies, stubs and mocks as well. Jest can be combined with Enzyme or React Testing Library to test your React components in an even more powerful way. The following tutorial series gives you a great introduction to testing React components:
As you can see, there are various ways to test React components:
- Mocha, Chai, Sinon + Enzyme: If you are coming from a Node.js environment.
- Jest + Enzyme/React Testing Library: If you want to test the more idiomatic way.
In addition, you may want to end-to-end test your React applications as well. I have found Cypress the best option to conduct these kinds of tests: How to test React components E2E with Cypress. If you want to dive into visual regression testing, you can use React Storybook: Visual Regression Tests and React Storybook.
If you went through all the mentioned tutorials, you should have a good grasp of testing React components. I would say that testing React components with Mocha/Chai is rather optional, because Jest is the better alternative for it. Also visual regression testing may not be relevant for everyone. My recommended test stack would be Jest + Enzyme/React Testing Library for unit/integration tests and Cypress for end-to-end tests. Then add testing coverage to the mix and connect your application to your favorite CI to run your tests in the cloud as well.
Did the article help you? Share it with your friends on social media , support me as my Patron, and become a full-stack developer with my books