如何测试 componentDidMount 有条件地进行 API 调用答案

【问题标题】：How to test componentDidMount conditionally making API calls如何测试 componentDidMount 有条件地进行 API 调用
【发布时间】：2018-10-24 23:27:23
【问题描述】：

我在我的应用程序中使用 React。我正在我的componentDidMount 中进行 API 调用，但它是有条件的。我在组件中的代码是

componentDidMount() {
    if (!this.props.fetch) {
      fetchAPICall()
        .then(() => {
          /** Do something **/
        });
    }
  }

我把测试写成：

it('should not fetch ', () => {
      const TFCRender = mount(<Component fetch />);
      const didMountSpy = jest.spyOn(TFCRender.prototype, 'componentDidMount');
      expect(didMountSpy).toHaveBeenCalledTimes(1);
      expect(fetchAPICall).toHaveBeenCalledTimes(0);
    });

测试给我带来了错误

TypeError: Cannot read property 'componentDidMount' of undefined

我做错了什么以及测试这种情况的正确方法是什么。

【问题讨论】：

你必须模拟fetchAPICall并测试它是否被调用
检查一次，它可能会有所帮助stackoverflow.com/questions/43245040/…

标签： javascript reactjs enzyme jestjs

【解决方案1】：

从official docs，您需要在安装组件之前spy。

以下是我使用 create-react-app 创建的一个工作示例。我还在示例代码中添加了一些 cmets：

App.js

import { fetchAPICall } from './api';

class App extends Component {
  componentDidMount() {
    if (!this.props.fetch) {
      fetchAPICall().then(console.log);
    }
  }
  render() {
    return <div>Testing the result</div>;
  }
}

export default App;

api.js

export const fetchAPICall = () => {
  return Promise.resolve('Getting some data from the API endpoint');
};

App.test.js

import Component from './App';
import * as apis from './api'; // assuming you have a separate file for these APIs

// Mock the fetchAPICall, and since the data fetching is asynchronous 
// you have to mock its implementation with Promise.resolve()`
apis.fetchAPICall = jest.fn(() => Promise.resolve('test'));

describe('spyOn', () => {
  let didMountSpy; // Reusing the spy, and clear it with mockClear()
  afterEach(() => {
    didMountSpy.mockClear();
  });

  didMountSpy = jest.spyOn(Component.prototype, 'componentDidMount');

  test('should not fetch ', () => {
    // Ensure the componentDidMount haven't called yet.
    expect(didMountSpy).toHaveBeenCalledTimes(0);

    const TFCRender = mount(<Component fetch />);
    expect(didMountSpy).toHaveBeenCalledTimes(1);
    expect(apis.fetchAPICall).toHaveBeenCalledTimes(0);
  });

  test('should fetch', () => {
    expect(didMountSpy).toHaveBeenCalledTimes(0);

    const TFCRender = mount(<Component fetch={false} />);
    expect(didMountSpy).toHaveBeenCalledTimes(1);
    expect(apis.fetchAPICall).toHaveBeenCalledTimes(1);
  });
});

不确定这是否是最佳实践，但这是我通常编写自己的测试的方式。

希望对您有所帮助！

【讨论】：