web-dev-qa-db-ja.com

jestと酵素を使用して反応するAPIコールをテストするにはどうすればよいですか？

Reactコンテナがあり、その中でAPI呼び出しを行っています。jestと酵素を使用してこれをテストできますが、方法は不明です。

これは私のコードです：

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
7
pinglinh

それは単体テストの素晴らしいところです。より良いコードを書くことを強制します。したがって、このコンポーネントを適切にテストするには、次のことを行う必要があります。

  1. コンポーネントからperformSearchを別のファイルに抽出します。 api.js

  2. モックperformSearchapi.jsファイルで （jest：モックモジュール）

  3. これで、フェッチ関数が呼び出されたことをテストできます。

このコード編成を使用すると、APIサービスを呼び出すことなく、API呼び出しとSearchContainerを個別にテストできることに注意してください。

7
Val

performSearchをラップするモジュールにfetchを抽出することにより、これにアプローチします。所有していないもののテストについては このすばらしい記事 をご覧ください。

その後、検索コンポーネント内に記事の状態を保存する場合、SearchContainerはもう必要ないかもしれません。既にperformSearchプロパティで依存性注入を使用しているので、代わりにモックオブジェクトを渡し、jest.fn()を使用して呼び出されるようにすることができます。

例えば：

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

そして、JavaScriptと同様に、新しいフェッチラッパーをテストします。

3
Steve Hansell