无法测试componentWillMount中执行的组件方法

Question

我有一个名为App的组件，在这个组件中我有一个名为fetchContent的方法。在我的componentWillMount方法中调用此方法，我正在尝试验证在安装组件时是否确实调用了它。以下是我的方法：

export default class App extends Component {
  fetchContent = (current) => {
   ...do some stuff in here
  }

  componentWillMount() {
    this.fetchContent('techcrunch');
  }

如您所见，我使用箭头函数而不是将其绑定到构造函数中的组件。我需要绑定它，因为它也是一个调用click事件的方法。

但是，当我尝试在此组件中运行我的单元测试时，我无法让我的间谍/存根工作，因为它会抛出错误说：

TypeError: Attempted to wrap undefined property fetchContent as function

以下是我的单元测试：

it('should fetch the content when component mounts', () => {
    sinon.spy(App.prototype, 'fetchContent');
    wrapper = mount(<App />);
    expect(wrapper.instance().fetchContent).to.have.been.calledOnce;
});

但是，如果我的方法没有绑定或没有使用箭头功能，它可以正常工作。

任何想法如何实现它？

Answer 1

好吧，我需要在stackoverflow上有50个代表来评论，所以这不会回答你为什么它没有得到存根的实际问题。

无论如何，鉴于这种情况，如果我是你，我不会存在实际的实现，this.fetchContent，而是测试属性的作用。

这是一个例子，如果fetchContent做这样的事情：

fetchContent = (current) => {
  this.setState({foo: current});
}

然后我会测试state.foo是否有你在组件安装时在fetchContent中传递的内容。

Answer 2

如果目标是确保适当的函数调用作为另一个函数的副作用发生，我喜欢像这样接近它：

const wrapper   = shallow(<App />)
const component = wrapper.instance()

// either
sinon.spy(component, 'fetchContent');
expect(wrapper.instance().fetchContent).to.have.been.calledOnce;

// or
const restore          = component.fetchContent
component.fetchContent = jest.fn()
const mock             = component.fetchContent

component.componentWillMount()

expect(mock).toHaveBeenCalled()
container.fetchContent = restore

您可以只测试enzyme.mount的副作用，并相信React可以适当地执行其生命周期方法的工作，而不是使用componentWillMount。