如何在 JavaScript 中测试包含 fetch 调用的部分代码

Question

假设我有这段代码（来自 Create React App）：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  componentDidMount() {
    fetch('manifest.json').then(r => r.json()).then(data => {
      console.log(data);
    }).catch(e => console.log(e));
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

如何测试componentDidMount并获得100%的代码覆盖率？

我用过nock 和isomorphic-fetch，但是有更好的选择吗？

谢谢。

Answer 1

fetch 您指的是基于 create-react-app 的项目中的全局。事实上，afaik，他们在内部使用 isomorphic-fetch 来公开它（作为旧版浏览器的 poly-fill）。由于 create-react-app 带有 jest，您可以在开始测试之前使用 jest 模拟全局。

使用标准的 setupTests.js 模块模拟任何全局变量，例如 fetch。

您可以使用global 命名空间来访问/模拟它们。

global.fetch = jest.fn();

Answer 2

您可以将fetch 作为道具传递到您的组件中，因此在您的测试中您可以传递fetch 的模拟版本

示例类：

class Foo extends React.Component {
  componentDidMount () {
      const { fetch } = this.props
      ... your fetch code ... 
      }
    }
}

当你在使用组件的时候，你传入real fetch：

const fetch = window.fetch // or however you're importing it

const UsesFoo = () => (
 <Foo fetch={fetch} />
)

现在你的测试：（假设开玩笑和浅渲染）

const fakeFetch = jest.fn()

it('Should mock fetch', () => {
  const res = shallow(<Foo fetch={fakeFetch} />)
})