Question

我有一个名为App的组件，在这个组件中我有一个名为export default class App extends Component { fetchContent = (current) => { ...do some stuff in here } componentWillMount() { this.fetchContent('techcrunch'); }的方法。在我的componentWillMount方法中调用此方法，我正在尝试验证在安装组件时是否确实调用了它。以下是我的方法：

TypeError: Attempted to wrap undefined property fetchContent as function

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

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

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

以下是我的单元测试：

=MID(A1,1,FIND("-",A1,1)-1)

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

任何想法如何实现它？

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。

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

2 个答案: