How to test API calls in react using jest and enzyme? - reactjs

Question

I have a React container in which I am making the API call and would like to be able to test this using jest and enzyme but unsure how to.
This is my code:
import React from "react";
import Search from "../../components/Search";
import { API_KEY } from "../../../config";
class SearchContainer extends React.Component {
state = {
articles: []
};
performSearch = event => {
fetch(
`http://content.guardianapis.com/search?q=${event}&api-key=${API_KEY}`
)
.then(response => response.json())
.then(data => this.setState({ articles: data.response.results }));
};
render() {
return (
<Search
performSearch={this.performSearch}
articles={this.state.articles}
/>
);
}
}
export default SearchContainer;

Answer 1

That's a great thing about unit testing, they force you to write better code. So to properly test this component, you should do the following:
Extract performSearch from The component into a separate file e.g. api.js
Mock performSearch in your api.js file (jest: mock a module)
Now you can test that the fetch function was called.
Note that with this code organization you could separately test your API calls and your SearchContainer without calling your API service.

Answer 2

I would approach this by extracting performSearch out into a module that wraps fetch. See this great article on testing things you don't own.
After that, you may not need SearchContainer any more if you store the articles state within the Search component. Since you're already using dependency injection with the performSearch property, you can pass in a mock object in place of it and use jest.fn() to ensure it is called.
For example:
const fakePerformSearch = jest.fn();
const component = Shallow(<Search performSearch={fakePerformSearch}/>);
expect(fakePerformSearch).toHaveBeenCalled();
And then test your new fetch wrapper as you would any JavaScript.

Answer 3

A lot of the other answers recommend using Jest's import mocker or a mock function, however, this tests implementation over behavior.
It's better to stub the environment instead of the tools. Let's write a test using an HTTP interceptor like nock. The beauty of this is you can migrate to different data fetching tools or make changes the fetch behavior and get feedback from your tests.
// src/SearchContainer/SearchContainer.test.js
import React from "react";
import nock from "nock";
import {mount} from "enzyme";
import Search from "../../components/Search";
import { API_KEY } from "../../../config";
describe('<SearchContainer />', async () => {
it('searches for articles', () => {
const scope = nock('http://content.guardianapis.com')
.get('/search')
.query({'api-keys': API_KEY, {q: 'some article'}})
.reply(200, {
results: [...]
})
const wrapper = mount(<SearchContainer />);
const searchInput = wrapper.find('[data-test-id="search-input"]');
await searchInput.simulate('change', { target: { value: 'some article' } });
const articles = wrapper.find('[data-test-id="articles"]');
expect(articles.length > 0).toBe(true);
expect(scope.isDone()).toBe(true);
});
});
For a deeper dive on testing API calls, I wrote a blog post Testing Components that make API calls.