Testing React Component with JEST
Previously, I said that I was going to start with a project for the next blog, but I think it is important to learn about testing before we start any project. Why is it? In software development world, software testing is defined as “the act of examining the artifacts and behaviour of the software to understand the risk of implementation, and to importe the quality of the software.” We all know if a software is not working properly, it will create a bad user experience, thus, we will lose our audience. In business, this is translated as loss of sales/revenue. According to this article, there are two types of testing methods: automated and manual testing. Automated testing is by far more preferable since each unit testing will be performed automatically, thus will reduce the time for QA. This is the reason why Facebook decided to create JEST for automated React unit testing.
What is JEST? It is a JavaScript testing framework, not a library, with the claim to “provide a delighful JavaScript testing, since it offers hassle-free experience.” How to start testing your React code? There are two ways to start testing with JEST: setup with vs without “Create-React-App”. In addition to that, there are two different testings can be conducted using JEST: snapshot testing and DOM testing. Read this tutorial for detail steps.
In my testing example, I will be using my previous project, which I had created using “create-react-app”. One thing to remember is that JEST is a framework, so it comes with its own test runner; thus you can run JEST test in CLI. Before you start testing, it is adviseable to test a simmple React application, to make sure test is working properly. How to do that?
First, create a file, called todo.js that will return a div. Then, create another test file, called, todo.test.js, to write the test. JEST recognizes the .test.js file as a test file. Once those two files are written, on your command line, type “npm run test”. Snapshot below shows how it looks when the test run is good or fail.
Let’s try to write a function that calculate the power of some number. Pay attention here that I keep all the test files under a folder “__tests__”. It is important to make sure you will have the correct path to the file, to run the test.
We can also test App.js to make sure if components are rendered properly. Go back to todo.js that returns h1 tag, we want to render this Todo in App.js and test if Todo component is rendered properly. Let’s write a test for it in a file called App.test.js.
As a reminder, test function takes two arguments, a name, and a function. The above code has a test named “renders todo”, and a function that call a render function from “testing-library/react”, which was installed in React package when we do “create-react-app” to start the project. To check if testing library is installed, just go to package.json and look for “@testing-library/react” under dependencies. If you don’t have this installed, you can type“npm i — save-dev @testing-library/react react-test-renderer”.
Under second argument of test, we use getByText function. This is actually a function available under dom-testing-library. Read more about “getByText” query in this article. What this does is that the query will reach out some element and destructure to return some value/information. That’s how we use them in the line 6, in App.test.js. We call getByText function to find “Hello World!” in h1. Then, in the next line we call expect function to test if the rendered element has value that matches “Hello World!”.
Another way to test the rendered element is to check if specific HTML tag is rendered. Instead of checking the value of h1, we can check if h1 tag is rendered. How we do that is to use screen from testing library. In addition, we need to label the tag we want to test (which is h1) with a test id and use function toBeInTheDocument(). We can add more test to check if the value of h1 is “Hello World!” by using toHaveTextContext function.
We can also test Hooks with “@testing-library/react”. In my previous blog, we learned about how to create a checkbox with useReducer hook. Let’s test the status of checkbox, if it’s checked or not, by following Eve Porcello’s video.
Again, to test this, we need { render } function from testing-library, and use getByLabelText function, we render the Checkbox component. In this case, we need a form control since we are testing the DOM; thus we need to have a tag “htmlFor” and an id under input.
We will continue our React learning in the next blog. Stay tune and thank you for reading! Happy Learning!