Unit Testing in React Native using Jest

We are humans, and humans make mistakes! Therefore, testing is essential in uncovering these mistakes and verifying your code.

• Test cases identify edge-case scenarios and ensure that your code continues to function as expected in these situations.
• Testing ensures that your code continues to work in the future as you add new features or refactor the existing ones.

Application testing is an important part of building applications, as it prevents regression and enables your code to perform effectively. Using Jest as a test runner is one way to accomplish this.

Jest had 50m downloads in the last month and was used on over 3,898,000 public repos on GitHub. Moreover, it is used extensively at renowned companies like Facebook, Instagram, Twitter, Spotify, Airbnb, and The New York Times.

What Is Jest?

Facebook has developed Jest — a popular test framework for JavaScript that provides delightful JavaScript testing.

Jest does not rely on any third-party tools for much of its functionality. Ease to set up, time-saving, and hassle-free are some of the advantages of Jest.

Jest has gained much popularity over recent years for both front-end and back-end testing.

Getting started with Jest

The official docs for starting with Jest can be found here. Now, let’s follow the instructions and create a new project along with a package.json file with the help of the npm command.

npm init -y

Install Jest as a dev dependency

npm install --save-dev jest

For TypeScript

npm install --save-dev ts-jest

Now, let’s start by writing your first test

Create a folder Multiply and two files multiply.js and multiply.test.js inside it.

Inside multiply.js, create one multiply function and export that function.

multiply.js

Next, we will create our test cases. So first, import the multiply function inside the multiply.test.js file.

Jest: ‘describe’ and ‘it’ block

describe breaks your test suite into components. Depending on your test strategy, you might have a describe for each function in your class user-facing functionality.

it is where you perform individual tests. You should be able to describe each test in a little sentence, such as it multiply 4*3 to equal 12.

Next, we have a describe block that is used to group common tests. We have two test cases with it blocks. Now, the it block has a test name first, and in a callback function, we have expect. Here, we are checking whether the multiply gives the correct result.

multiply.test.js

Now change the script tag in package.json and add test: “jest” into scripts for run jest test script.

package.json

Now let’s run this command in the terminal to run test cases.

npm test

Here, we can see all test cases passing. :)

Next, we will learn to test Asynchronous functions. So, create a new folder API and a file api.js inside it. Here, we are doing a simple API call with async-await to the JSON placeholder endpoint and get the data back.

For that, first, we need to install Axios for API calls.

npm i axios

With the help of this test API https://jsonplaceholder.typicode.com/posts/1, we will get this JSON response.

API response in JSON object

api.js

• Now, to test our fetch posts function, we also need to do the API call in the api.test.js file.
• Here, in the first test case for userId, we are again using async-await. After getting the result, we are using a simpletoBe to test if the userId is 1.
• In the next test, we are using the then block to do the API call. Here, after receiving the data, we are checking whether the title contains the string ‘aut facere’. It contains the string, which we can see from the screenshot in the previous section.

api.test.js

• In the API example, we also did a real API call in the test case. We generally mock the API call in a test case because we don’t want to be dependent on an external API that might not be completed or might have some errors. Also, for paid APIs, we can save the API call with the help of a mock API call.

Create a folder Mock and add a file mock.js in it. Here, we are doing the same API call as earlier.

• Now, in the mock.test.js file in the same directory, we are using jest.spyOn() to mock the API call. Here, we can use a different object with our own values.

mock.test.js

• Now, when we run this test case, everything passes. But we can also see the console log from the fetch.js file. Here, we are getting the data from our mock call, not the real data.

run mock.test.js output

Next, we will learn about an important concept of setup. So, create a new folder Setup and add a file setup.test.js in it.

Here, we have a color array. In the first test case, we are pushing a new color at the beginning and testing it.

In the second test, we are pushing a new color at the end and testing it.

In the last test, we are testing whether the array is of length 4.

When we run the test, the first two pass, however, the last one fails because the array length has been increased to 6 because of the two elements added by the two test cases before it.

This completes our small Jest tutorials!

Conclusion

To conclude, In this Jest tutorial, we’ve walked through the basics of the Jest framework. We’ve learned how to install the Jest framework and saw how it could be used for testing simple JavaScript files.

Hope this article has helped you learn something new today. If you’ve enjoyed reading this article, be sure to throw me a couple of claps!👏

Happy Learning :)