Unit testing with React Testing Library
Writing code with no tests is like playing roulette with your client’s money.
Let’s play a game where you always win.
For this tutorial, I’ll be using the react-testing-library by Kent C. Dodds.
We want to assure every time our app behaves as expected every time it runs. To do so, we need to test it.
A test compares a received value with an expected result, where it can fail or pass. This gives us trust for our code and clarity to our users.
Code coverage
How much of our code is being tested?
The more meaningful tests we do, the better. This is what good coverage looks like.
As I said earlier, try to write meaningful tests: don’t test everything in your app, only what’s important. There is no magic number or percentage of what good coverage is, that is something you must define for your project, having over 70% of coverage is a nice goal.
The testing pyramid
There are three main levels of testing, I present to you the testing pyramid.
As you can see, unit testing is the fastest and cheapest way to begin testing our apps. Integration tests and UI tests are the next steps, manual testing is represented as a cloud because it can’t be measured, it often consists of doing console.log() or clicking the UI until something crashes.
Let’s get started
For this example, we’ll create a simple react project: a contact list that looks like this. The code for this example is here.
We’ll focus on testing the <Card /> component, which is every card containing our contact data. Here is the code.
What should we test?
Let’s think for a moment, what’s important to our users?
Well, there are two main tests we should cover:
- Does <Card /> render without crashing our app?
- The toggle button to show and hide information works?
Setup
To get started:
- Create a __tests__ folder inside the src of our app (pretty much a standard).
- Create a card.test.js file inside the folder we just created. Everything with a *.test.js inside our app will be tested.
Make sure you installed the react-testing-library.
npm install — save-dev @testing-library/react
3. Import needed files, our card.test.js file should look like this.
Writing our first test
The following is the “Hello world” for testing in React. Let’s test if our component is being rendered.
- [1–3] We import the render method from react-testing-library, we ask it to simulate rendering our <Card /> component.
- [5] test receives two values, a string saying what our test is about and a function of what the test should do.
- [6–7] Using getByTestId we can extract an HTML element and check if it contains a data-testid attribute. We previously added data-testid=”card” to the main wrapper of the <Card /> component.
- [8] This is the key part of our test, expect is a Jest utility to compare our target and see if our test fails or passes. We expect our <div> to be defined in the DOM.
- Run yarn test and… our test passed!
There is so much more you can target with react testing library, make sure you check their docs to see everything it offers.
Testing events
Let’s test the toggle button.
We want to make sure every time our toggle is being clicked it… well, toggles.
First, we add a user object to be passed as props to our <Card /> component, like this:
We’ll use the fireEvent utility so we import it:
And we write our test:
- [17] We target the button element in our DOM to use it later, using getByTestId.
- [18] At first we expect our hidden container to be null because at this point it doesn’t exist.
- [19] We use fireEvent to simulate a click on the Show/Hide details button.
- [20] Now we do expect the container to ve visible and loaded in the DOM.
Run yarn test and… it passes!
This was just a little introduction on how to unit test react components, you can see the full project here.
Thank you for reading, I hope this brief introduction helped you in some way to understand the testing process for React applications and apps in general.
