Question

无法弄清楚如何在其中执行多个操作来测试onClick函数。

onButtonClick = function(action){
  this.props.otherAction();
  action();
}
...
<Button bsStyle="success" bsSize="small" onClick={onButtonClick.bind(this,someAction}>
  Something
</Button>

我目前的测试就是这样。

const onButtonClick = function (action) {
  actions.otherAction();
  action();
};

it('Should include a button with multiple actions on onClick event.', function () {
    const button = shallowTestUtils.findAllWithType(_component, Button);
    expect(button[0].props.onClick).to.equal(onButtonClick.bind(this, actions.someAction));
});

我得到的结果就是这个。

AssertionError: expected [Function] to equal [Function]

Answer 1

问题在于Function.prototype.bind的每次调用都会返回一个新函数。所以这些功能不相等

function onClick() {
}

console.log(onClick.bind() === onClick.bind()) // prints false

如果要检查该按钮是否收到您的点击处理程序，您可以触发模拟点击并检查操作的结果。此外，您可以模拟onClick以窥探函数。

it('should trigger handler on button click', function () {
  // mock actual action
  _component.onClick = sinon.spy();

  // find button and trigger click on it
  const button = shallowTestUtils.findAllWithType(_component, Button)[0];
  ReactTestUtils.Simulate.click(findDOMNode(button));
  expect(_component.onClick.called).to.be.ok();
});

UPD。如果您想针对商店测试您的组件，为了确保调度了正确的操作，您可以通过以下方式执行此操作。

首先，创建模拟商店：

const mockStore = {
   dispatch: sinon.spy(),
   getState() {
     // here you can return some mock state
   }
}

然后将此商店传递给您的组件。（我假设您的MyComponent已连接到商店）

const component = TestUtils.createRenderer().render(<MyComponent store={mockStore}>)

const button = shallowTestUtils.findAllWithType(component, Button)[0];
ReactTestUtils.Simulate.click(findDOMNode(button));
// here you can check that dispatch was called with all expected actions
expect(mockStore.dispatch.calledWith({type: 'ACTION_TYPE'})).to.be.ok();

请参阅Sinon documentation以了解有关间谍检查的更多信息。

测试具有多个操作的React组件onClick事件

1 个答案: