web-dev-qa-db-fra.com

Comment tester les appels API réagissent en utilisant Jest et enzyme?

J'ai un conteneur React dans lequel je passe un appel API et j'aimerais pouvoir le tester en utilisant plaisanterie et enzyme, mais sans savoir comment. 

Ceci est mon 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;
reactjsapitddjestjsenzyme
6
pinglinh

J'aborderais ceci en extrayant performSearch dans un module qui enveloppe fetch. Voir cet excellent article sur le test de choses que vous ne possédez pas.

Après cela, vous n'aurez peut-être plus besoin de SearchContainer si vous stockez l'état des articles dans le composant Rechercher. Puisque vous utilisez déjà une injection de dépendance avec la propriété performSearch, vous pouvez transmettre un objet fictif à la place de celui-ci et utiliser jest.fn() pour vous assurer qu'il est appelé.

Par exemple:

const fakePerformSearch = jest.fn();
const component = Shallow(<Search performSearch={fakePerformSearch}/>);
expect(fakePerformSearch).toHaveBeenCalled();

Et ensuite, testez votre nouveau wrapper d'extraction comme vous le feriez avec du JavaScript.

2
Steve Hansell