如何使用jest和酶测试API调用？

Question

我有一个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;

Answer 1

对于单元测试来说，这是一件很棒的事情，它们迫使您编写更好的代码。因此，要正确测试此组件，您应该执行以下操作：

1. 从组件中提取performSearch到一个单独的文件中，例如api.js

2. 在您的api.js文件中模拟performSearch （开玩笑：模拟一个模块）

3. 现在，您可以测试是否调用了fetch函数。

请注意，通过此代码组织，您可以单独测试API调用和SearchContainer，而无需调用API服务。