Тестирование события onClick компонента React с несколькими действиями в нем

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, чтобы узнать больше о шпионских проверках.