PROJECTS
React Testing Library
Just as before, it’s good to check that we did actually
call the mockedAxios function. Next I’m going to check
one of the data objects to make sure it has the same
id as mockedDataOne:expect(data[0]).toEqual(
expect.objectContaining({
id: mockedDataOne.id
})
)You could do more tests, perhaps making sure that
the next item in the array also has the corresponding
ID but this is enough to convince me that the data is
returning correctly.
Now this does seem a little circular at first. You
might think: ‘Of course it contains it! That’s what
you told it to contain!’ But think about it for a
minute: we haven’t just returned that data. We’ve
used our existing code (minus the actual API calls
and real data) to return it. It’s like throwing a ball,
then our code caught it and threw it back.
If nobody threw our ball back, then something is
very wrong with the code we’re testing.TEST 3: FETCH DATA WITH THE
PARAMETERS SPECIFIED
Here’s our next assertion. We want to make sure our
code passed the parameters we wanted and returned
the value we expected.it(“should get data using parameters”, async () => {
const parameters = {
categories: [“2”]
};This time our params contain an array specifying
category 2 should be fetched.mockedAxios.mockResolvedValueOnce({ data:
[mockedDat aTwo] });
const data = await GetApiData(domain, parameters);First, let’s test that we have properly sent the API
request with the parameters we’ve specified:expect(mockedAxios).toHaveBeenCalled();
expect(mockedAxios).toBeCalledWith(`${domain}/api/`, {Last piece of set up here: we want to reset our
mocked API call and console log before each new
test, otherwise we’ll have stale data left over from
the previous test, which could cause subsequent tests
to fail or return false positives.
Here’s the cleanup / reset function:beforeEach(() => {
mockedAxios.mockReset()
mockedConsole.mockReset()
})Right, now we’ve set up our tests and mocked the
important stuff, let’s dive into our first test.TEST 1: FETCH API DATA
Inside that describe() function, below the beforeEach(())
block, write your first test:it(“Should get api data”, async () => {
mockedAxios.mockResolvedValueOnce({ data: [{ test:
“Hi, I worked!” }] });
await GetApiData(domain);
expect(mockedAxios).toBeCalledTimes(1);
});mockResolvedValueOnce() is a built-in function in Jest
that will mock the resolved value of the API call just
the once.
Here we’re mocking the result of the mockedAxios
call. We’re not testing the contents of the data,
so I’ve just added a dummy object to the result of
the mockResolvedValueOnce() function, since that’s
adequate for what we’re testing.
You can now run this test and you should see one
passing test. So it worked! We can stop there, right?
Well... how do we know our code contacted the
right API endpoint? How do we know it sent the
correct parameters, if we need any?TEST 2: RETURN THE DATA IF THE CALL
WAS SUCCESSFUL
Our next test is going to check that we have received
the data we expected in the return value of the
GetApiData() function:it(“Should get data from the api”, async () => {
mockedAxios.mockResolvedValueOnce({ data:
[mockedDataOne, mockedDataTwo] });This time we’re mocking the return value containing
the two objects we originally set up.const data = await GetApiData(domain);
expect(mockedAxios).toBeCalledTimes(1);FOR MORE
REACT
TESTING
TIPS, CHECK
OUT NET 327
https://netm.ag/
issue327“Another check to do is that the
data only contains items with this
category and not any other”