We are going to use two types of test in react, one is called jest(JavaScript testing framework) is a JavaScript testing framework maintained by Facebook, Inc automatically injected when we created our react app and the second one is by using Airbnb’s API called an enzyme.
First, we are going to talk about jest, this is what we created in our first test:
How does the unit test is working?
We start our jest test by running “npm run test”, jest at the beginning will run description on the screen, then it will start to check inside arrow function if the content of the arrow function is true, then the description will check the true sign otherwise will check ‘x’ sign false.
To start a new test case in our app, it starts with the test keyword in jest, also we can use the “ it “ keyword instead of the “test” keyword. The test has two parameters one is a description string that is open to writing anything without getting an error, the second parameter is arrow a function which contains all our test process inside this function.
Inside the arrow function, we have created a temporary powerful element called div.
The reason we are creating this element because react always expected to run inside the browser, he only deals with the browser and we are working on the CLI environment, and jest is only be executed on CLI.
So to solve this issue we are created this div inside our memory not the browser inside but inside our terminal documented for us automatically by JSDOM, so this div comes from JSDOM, not from browser HTML.
Then we are rendering our component App to div element in order to use it in the jest test.
ReactDOM.render(<App/>,div);
Let’s check the code below, we used to expect method to check or inspect our app component, and bye using toContain method to confirm if it contains the About component or not?
expect(div.innerHTML).toContain(‘About’);
We are going to see the result below:
As we see the Test suites are passed. Then App component includes the About component.
We also used another test method called toBeTruthy(), which is to check if our App instance component correct or not.
expect(‘div.innerHTML’).toBeTruthy();
The last line we are used the unmountComponentAtNode() method to delete div after the test case is done his work, because we don’t want div still live inside memory which is taking too much memory space, in case we have 100 test cases, all of them will take space in memory if they are not deleted after finishing the case, so this method below is solving this issue for us.
ReactDOM.unmountComponentAtNode(div);
We finished our jest test, now we are going to explain the enzyme test in the example.
First, we are going to run one of these codes, maybe just one line of code will work, or may you need to run all of them.
npm i — save react@16 react-dom@16
npm i — save-dev enzyme
npm install — save enzyme enzyme-adapter-react-17
//we use react 17 version here, if you are using react 16 then change it to enzyme-adapter-react-16 .
To run the enzyme we have to create a configuration file called setupTests.js Then we going to add these lines of codes to import the enzyme and adaptor.
import Enzyme from ‘enzyme’
import Adapter from ‘enzyme-adapter-react-16’
Enzyme.configure({adapter: new Adapter()})
Before we start the enzyme test, we are going to explain the ways how to render that kind of test Api. There are three ways to do that:
1-static : render the given component and returns the HTML and return it.
2-shallow : it render given component and not depend on his children. And does
Call react lifecycle component.
3-Full-DOM : Mounts the component in a DOM, which means test can affect each
others like child component. So when you test parents it can also depend on the child.
4- selector : you can use css selector inside
I’m going to show the first enzyme test case for you:
As you see above, we need to import shallow because we are going to use a shallow way to render component for the test case, so ‘It’ keyword receives two-argument ‘description’ string and arrow function, inside the arrow function we have declared wrapped constant and assigned shallow function on it, we stick our app component on shallow function.
Then in the other line, we used expect the function to check the wrapped variable that has an app component to see is there a movie component on it or not.
So in the result above, we didn’t pass this test because App component wasn’t included Movie component, after we added the Movie component to the app component, the test has passed:
If we are put 3 in the toEqual(3) method, the test will fail because there is only one Movie component in the App component.
In one app, we also used a test case to find 2 textarea input in the form in the AddTest component, and we got the test passed.
There is two helper method we used them in one our app, they are called beforeEach and afterEach, so the beforeEach method is telling our test before you start the test, Implement this line of code for us, so we are used here in this app to declare our wrapped variable to prevent duplicate them in every test case.
afterEach method is a method that runs after the test case is done his test, in this example, we are used unmount method inside afterEach method to end each test case after finished.
In the next example, we are tested our AddTest component by the find method to find the button and we used the event listener type submit form to check if the user correctly submitted the button, and we checked does the input includes a new value
Note: I just added a unit test to one of my app which I was created one month ago called the test-card app which is shown and adds interview questions and answers to the card, but today I just added a test case on it, so in this post, you may see the name of the app is same of the test but the functionality of this app is different not designed just for practice unit test.
