Question

我想测试一些在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

我在做什么错？

Answer 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。

监视componentDidMount中的方法调用

1 个答案: