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

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;

Val · Accepted Answer · 2018-04-17 22:44:41Z

10

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.

answered Apr 17, 2018 at 22:44

Val

1967 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jingteng Over a year ago

Hi thanks for reply. I've done as you said. Could you show me how to write the test for this?

Steve Hansell · Accepted Answer · 2018-04-18 00:06:27Z

4

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.

answered Apr 18, 2018 at 0:06

Steve Hansell

17.7k1 gold badge20 silver badges14 bronze badges

1 Comment

jingteng Over a year ago

Hi thanks for answering! I went and extracted the API, could you check if this is fine?

import { API_KEY } from "../../config";  const fetchArticles = event => {   return fetch(     `http://content.guardianapis.com/search?q=${event}&api-key=${API_KEY}`   ).then(response => response.json()); };  export default fetchArticles;

anthony gonzales · Accepted Answer · 2021-03-24 18:38:50Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related