reactjs - method - react pass function to child component

Testing Reaccionar componente onClick evento con múltiples acciones en él

Question

No se puede averiguar cómo probar la función onClick con múltiples acciones en ella.

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

Y la prueba que tengo actualmente es así.

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));
});

El resultado que obtengo es esto.

AssertionError: expected [Function] to equal [Function]

Answer 1

El problema es que cada llamada de Function.prototype.bind devuelve una nueva función. Entonces estas funciones no son iguales

function onClick() {
}

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

Si desea verificar que el botón reciba su controlador de clics, puede activar un clic simulado y verificar el resultado de la acción. Además, puedes onClick función onClick to spy.

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. Si desea probar su componente en la tienda, para asegurarse de que se envíen las acciones adecuadas, puede hacerlo de la siguiente manera.

Primero, crea tu tienda simulada

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

Luego pasa esta tienda a tu componente. (Supongo que su MyComponent está conectado a la tienda)

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();

Consulte la documentación de Sinon para obtener más información sobre los controles espía.