监视 componentDidMount 中的方法调用答案

【问题标题】：spy on method call in componentDidMount监视 componentDidMount 中的方法调用
【发布时间】：2019-01-29 16:56:32
【问题描述】：

我想测试一些在 React 组件的 componentDidMount 生命周期方法中调用的自定义方法。

  componentDidMount() {
    getData().then(res => {
      console.log(res);
      this.setState({
        rate: res.data.bpi.USD.rate_float
      });
    });
  }

我正在从 api.js 导入 getData 方法：

export const getData = () => {
  return axios
    .get("https://api.coindesk.com/v1/bpi/currentprice.json")
    .then(res => {
      return res;
    });
};

像这样用 Jest 和 Enyzme 测试它：

describe("App", () => {
  describe("Calls getData when componentDidMount", () => {
    const spy = jest.spyOn(App.prototype, "getData");
    const wrapper = mount(<App {...props} />);
    wrapper.instance().getData();
    expect(spy).toHaveBeenCalled(1);
  });
});

失败：App › Calls getData when componentDidMount › encountered a declaration exception

并给我以下错误：

TypeError: Cannot read property '_isMockFunction' of undefined

我做错了什么？

【问题讨论】：

什么是getData，它在哪里定义？ getData() - 这不是 App 方法。
@estus 我正在从另一个文件中导入它。如果我从另一个文件中导入它，我该如何测试它？
你能在问题中显示这个吗？与代码相关的问题应包含 stackoverflow.com/help/mcve 。然后你不能在 App.prototype 上窥探它。因为它不是一种方法。这很可能应该通过jest.mock 完成。
@estus 更新了问题。
尝试将const spy 放在const wrapper 下方。而不是App.prototype 尝试wrapper.instance()。

标签： javascript reactjs ecmascript-6 jestjs enzyme

【解决方案1】：

getData 不是App 方法，它不能在App 类上被窥探，它在wrapper.instance() 组件实例上不可用。

可以使用jest.mock 模拟模块。正确的单元测试需要模拟除测试单元之外的所有内容。 axios 请求可以被模拟为：

import { getData } from '.../api';

jest.mock('.../api');

describe("App", () => {
  describe("Calls getData when componentDidMount", () => {
    getData.mockResolvedValue({ data: ... });
    const wrapper = mount(<App {...props} />);
    expect(getData).toHaveBeenCalled(1);
  });
});

注意shallow enables lifecycle hooks by default，预计componentDidMount 在组件实例化时被调用。

getData 可以通过模拟axios 以类似的方式进行测试； this is shown in the manual.

【讨论】：