Question

我正在组件中提取一些api。在进行单元测试时，我想模拟某些成员函数的实现：

//component.js
class Foo extends Component {
  prepareData() {
    getSthFromApi().then(getMoreFromApi).then(val=>this.setState({val}));
  }
  componentDidMount() {
    this.prepareData();
  }
}
//test.js
//What should this be?
Foo.prepareData = jest.fn().mockImplementation(() => {
  this.setState({val:1});
})
const comp = shallow(<Foo />);

我应该怎么做？

Answer 1

此代码的问题是Foo.prepareData是静态方法，而prepareData是实例方法。

由于prepareData是原型方法，因此可以在类原型上进行模拟；这就是one of the reasons为什么首选原型方法的原因：

jest
.spyOn(Foo.prototype, 'prepareData')
.mockImplementation(function () {
  this.setState({val:1});
});

请注意，mockImplementation应该具有常规功能，因为它不需要词法this。

Answer 2

您不应该模拟成员函数，而可以模拟getSthFromApi函数并一起测试componentDidmount和prepareData。

import { getSthFromApi } from "some-module";
jest.mock("some-module");

// in your test
getSthFromApi.resolves(1);
// here you can expect val to be 1 in your state.

React和Jest：如何模拟成员函数的实现

2 个答案: