Simular un clic de botón en Jest

Revisamos profundamente cada enunciados en nuestro sitio web con la meta de enseñarte en todo momento la información con la mayor veracidad y certera.

Solución:

#1 Usar broma

Así es como uso la función de devolución de llamada simulada de Jest para probar el evento de clic:

import React from 'react';
import  shallow  from 'enzyme';
import Button from './Button';

describe('Test Button component', () => 
  it('Test click event', () => 
    const mockCallBack = jest.fn();

    const button = shallow((Ok!));
    button.find('button').simulate('click');
    expect(mockCallBack.mock.calls.length).toEqual(1);
  );
);

También estoy usando un módulo llamado enzima. Enzyme es una utilidad de prueba que facilita la afirmación y selección de sus componentes React

#2 Usando Sinón

Además, puede usar otro módulo llamado Sinon, que es un espía de prueba independiente, stubs y simulacros para JavaScript. Así es como se ve:

import React from 'react';
import  shallow  from 'enzyme';
import sinon from 'sinon';

import Button from './Button';

describe('Test Button component', () => 
  it('simulates click events', () => 
    const mockCallBack = sinon.spy();
    const button = shallow((Ok!));

    button.find('button').simulate('click');
    expect(mockCallBack).toHaveProperty('callCount', 1);
  );
);

#3 Usar tu propio espía

Finalmente, puede crear su propio espía ingenuo (no recomiendo este enfoque a menos que tenga una razón válida para ello).

function MySpy() 
  this.calls = 0;


MySpy.prototype.fn = function () 
  return () => this.calls++;


it('Test Button component', () => 
  const mySpy = new MySpy();
  const mockCallBack = mySpy.fn();

  const button = shallow((Ok!));

  button.find('button').simulate('click');
  expect(mySpy.calls).toEqual(1);
);

Las soluciones en la respuesta aceptada están en desuso

#4 Llamando a prop directamente

Se supone que la simulación de enzimas se eliminará en la versión 4. El mantenedor principal sugiere invocar directamente las funciones prop, que es lo que hace la simulación internamente. Una solución es probar directamente que invocar esos accesorios hace lo correcto; o puede simular métodos de instancia, probar que las funciones de utilería los llamen y probar los métodos de instancia.

Podrías llamar a click, por ejemplo:

wrapper.find('Button').prop('onClick')() 

O

wrapper.find('Button').props().onClick() 

Información sobre la desaprobación:
Desaprobación de .simulate() #2173

Usando Jest, puedes hacerlo así:

test('it calls start logout on button click', () => 
    const mockLogout = jest.fn();
    const wrapper = shallow();
    wrapper.find('button').at(0).simulate('click');
    expect(mockLogout).toHaveBeenCalled();
);

Comentarios y valoraciones

---

---

Utiliza Nuestro Buscador