Question

我可以像这样模拟组件的功能（使用Jest，Enzyme和React）：

let wrapper = shallow(<Component />);
wrapper.instance().load = jest.fn(function(ref) {
  this.setState({ loading: false, notice: {thing: 'thing'} });
});
wrapper.update();

我的load函数实际上是由componentWillMount调用的。在我重载该功能之前，似乎 componentWillMount被称为。

那么有没有一种方法可以在实际构建组件之前模拟功能？

Answer 1

如果您修改Component原型，则该Component的实例将继承修改后的函数：

Component.prototype.load = jest.fn(function(ref) {
  this.setState({ loading: false, notice: {thing: 'thing'} });
});
let wrapper = shallow(<Component />);

Answer 2

还有另一种方法，您可以在包装实例中访问componentWillMount。将加载函数分配为jest.fn后，您可以从包装实例中调用componentWillMount。

wrapper.instance().load = jest.fn();
wrapper.instance().componentWillMount();
expect(wrapper.instance().load).toHaveBeenCalled();

这是工作沙箱https://codesandbox.io/s/6ym0r4z96w的链接

componentWillMount之前的酶模拟功能

2 个答案: