首页 文章

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

提问于
浏览 次
0

我在我的组件中做了一些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 />);

我该怎么办？

reactjs jestjs enzyme

2 回答

  • 0

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

    由于 prepareData 是原型方法，因此可以在类原型上进行模拟;这是one of the reasons为什么原型方法更可取：

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

    请注意， mockImplementation 应该提供常规功能，因为它不需要词法 this .

    回复于
  • 0

    您不应该模拟您的成员函数，而是可以模拟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.
    回复于

相关问题