Testing async API calls using Jest’s mocking features Jest is a great JavaScript testing framework by Facebook. It’s often used for testing React components, but it’s also a pretty good general purpose testing framework. In this tutorial I’ll give a quick and simple demo of it’s mocking capabilities for testing async functions. This article was also published on my own personal blog. Purpose of mocking Mocking async function (like API calls) instead of testing with a real API is useful for a couple of reasons: It’s faster: you don’t have to wait until the API response comes in and you don’t have to deal with rate limits. It makes your tests ‘pure’, i.e. whether they fail or pass depends only on your code, and not on the data that the API returns. It’s easier in the long run: no need to first login or set some state before you can start testing a certain endpoint. Setting up Jest Configuring Jest , but to get started quickly I’m using the official starter kit by Facebook, . This comes with a working Jest configuration out of the box! isn’t all that difficult create-react-app Install the create-react-app and create the app: yarn global add create-react-app create-react-app mocking-with-jestcd mocking-with-jest/yarn start This should open a browser window with a spinning React logo. Now start the Jest testing environment: yarn test You should see something like this: Congratulations, you’ve now got Jest up and running and are ready to start writing some tests! Adding the API We’ll be using for the making the API requests. Rest.js works well in the browser and Node.js. rest.js yarn add rest Create a new folder in the folder and add the file with the following code: api src github.js Then also add with the following code: request.js You’re now ready to make API requests using: . Let’s test this quickly in the browser. Replace the original contents in the file with the following code: github.getUser(‘vnglst’) App.js Use to open up a browser and see the result. You should see a simple list with my profile data. It works! yarn start Writing tests We’re now ready to write some tests. Let’s first try to unit test the function . Create a folder and in this folder a file with the following code: getUser __tests__ github.test.js Start Jest using and you should see the following error message: yarn test What’s happening here? It turns out that using our function in a Node environment (which Jest is using to run the tests) makes our request fail. So even though our function works in the browser, it fails in our tests! Would could try and fix this, by adding a header when we’re running this in a Node environment, but mocking would now be a better solution. Let’s set this up! getUser User-Agent Creating a mock Create a folder __mocks__ and in this folder a file (this will be the mocked version of request.js in the parent folder): request.js The mocked function expects a (i.e. ) file in a folder __mockData__. I’ve used my own Github username and data as an example here, but you can add as many example data as you need for your tests: userId.json vnglst.json To let Jest mock the request module, you have to add the following line to file: github.test.js jest.mock(‘../request’) Now the simple unit test should pass and you’re ready to write more complicated tests! I hope you enjoyed this tutorial and feel free to ask me any questions. You can find me on Twitter as . The source code of this tutorial can be found here: @vnglst https://github.com/vnglst/mocking-with-jest This tutorial is based upon the by the creators of Jest (and their example is probably better 😂). Be sure to also check out their other examples. async example BONUS: testing using async/await If you’re using the you can also use async/await to write your tests. This definitely makes your tests easier to write and more readable: create-react-app

Facebook

Super

Twitter

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

API testing with Jest

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Koen van Gilst

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

API testing with Jest

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Koen van Gilst

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES