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作为道具传递到组件中，因此在测试中，可以传递fetch的模拟版本

示例类：

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

在使用组件时，您将进行真实提取：

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} />)
})

Answer 2

您所指的

fetch是基于create-react-app的项目中的全局项目。实际上，afaik，他们在内部使用同构提取来公开此内容（作为旧版浏览器的填充）。由于create-react-app附带了jest，因此您可以在开始测试之前使用jest模拟全局变量。

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

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

global.fetch = jest.fn();

如何测试包含JavaScript中的访存调用的一部分代码

2 个答案: