React Testing Library
O It contacts the API successfully and then returns
the data
O It fetches data successfully with parameters
someone has specified
O The API call was successful but there was no
data, so the code returned an empty array
O The API call was unsuccessful, resulting in
an errorLooking at your code in the beginning like this (or
even drafting tests before you write your code) often
reveals other issues you may not have noticed before
and prompts you to improve what you had originally
planned to build.
To begin, I’ll create a new file to write my tests
in. The name of the file is usually the same as the
module. So if my module is called GetApiData.js, my
test should be GetApiData.test.js.
SET UP AND MOCKING
MOCK THE API AND CONSOLE
Let’s first import the code that was written to fetch
data from that API and also the library that we used
to connect to the API, Axios:
import GetApiData from ‘./GetApiData’
import axios from ‘axios’
Although this test is about fetching data from the
API, I don’t want to actually call the data from the
API in my test. There are several reasons for this.
Primarily, it’s because I’m not testing the API;
instead I’m testing the code that I have written.
Another reason is that there could be a cost involved
each time I contact the API and I don’t want or need
that cost to be incurred. Finally, I don’t want to have
to wait for the API query to resolve in order for my
tests to finish: that could lead to a lot of wasted time
waiting around!
To ensure I don’t make that API call, I’m going to
‘mock’ this function. When you ‘mock’ something
you are overwriting the function with a fake one.
After importing it, we can mock it like this:
jest.mock(‘axios’)
const mockedAxios = axios.get
We also want to mock the domain. This would be a
parameter that is passed via our configuration or
part of our environment variables. But we’re not
testing our environment variables, so we should
mock that domain too:
const domain = ‘http://fakeapi.com’
We also need to mock what we would have used in
our code to log out errors: console.log(), for similar
reasons we mentioned earlier: we’re not testing the
functionality of the console.const mockedConsole = jest.spyOn(global.console, ‘log’)Using Jest’s SpyOn function, we can see when that
function was called and what it was called with.MOCK THE DATA THAT SHOULD BE RETURNED
Finally, because we’re not contacting the API, we
need to provide mocked data to test against:const mockedDataOne = {
id: 1234,
title: ‘Super Blog Post’,
categories: [‘1’],
_embedded: {
‘term’: [[{ name: ‘Category’ }]],
author: [{ name: ‘Author’ }],
},
}
const mockedDataTwo = {
id: 165,
title: ‘Super Post Two’,
categories: [‘2’],
_embedded: {
‘term’: [[{ name: ‘Category’ }]],
author: [{ name: ‘Author’ }],
},
}CLEAN UPS
Our final step is to clean up after each test,
which means resetting the use of our function
calls. We need to do this inside the wrapping
describe(‘GetApiData()) function that contains all of our
individual tests:describe(‘GetApiData()’, () => {
// tests go here
})This wrapping function describes the component, or
makes a short statement to help us understand what
these tests are for.“Looking at your code in the
beginning often reveals other
issues you may not have noticed”