javascript函数内变量的测试值 - sinon / chai

Question

我在 React 组件中有以下功能：

parentFunction: function(items){
  let variableOfInterest = this.callThisFunction().toArray().filter((ele) => {
    if(obj[ele.get('id')]){
      return ele
    }
  }).map((ele) => ele.get('id'))

  this.setState({newState:variableOfInterest})
}

我可以使用存根编写调用 callThisFunction 的测试，但无法确定是否可以使用 sinon 或 chai 来监视 variableOfInterest 的值。我想编写一个可以传入参数的测试，并使用“期望”来测试结果的值。最后返回值也没有任何意义——而且仅仅为了测试而这样做似乎没有必要。 我也希望能够测试调用 toArray() 的结果，如果可能的话，还可以测试 filter()。感谢您的任何见解！

这是我调用 callThisFunction() 的测试：

it('should call callThisFunction() once', () => {   
  let callThisFunctionStub = sinon.stub(prototype, 'callThisFunction')
  let stub = callThisFunctionStub.callsFake(() => objectToReturn)
  prototype.callParentFunction(items)
  sinon.assert.calledOnce(stub)
})

Answer 1

我想编写一个可以传入参数的测试，并使用 'expect' 测试结果的值。

选项 1：

您可以简单地使用状态来获取newState 的更新值，并将其与您的预期值进行比较。

这可以通过使用airbnb/enzyme 库来测试您的 React 组件来轻松完成。 Enzyme 还使用mocha 和chai，因此语法几乎相同。如果您想使用它们，它还提供了一个间谍和模拟 API——尽管在这种情况下您可能不需要。

下面是通过浅层渲染获取.state()的API示例：

const wrapper = shallow(<MyComponent />);
expect(wrapper.state().foo).to.equal(10);
expect(wrapper.state('foo')).to.equal(10);

因此您需要为具有parentFunction 的组件编写测试，对该组件进行浅挂载，模拟parentFunction 的调用，然后获取state 并检查其值。

选项 2：

如果你不想检查状态，或者想为variableOfInterest的计算编写更多涉及的测试，你可以尝试将计算代码移动到不同的函数中，并为编写测试 函数。