Simular un clic de botón parece una operación muy fácil/estándar. Sin embargo, no puedo hacer que funcione en las pruebas de Jest.js.
Esto es lo que probé (y también lo hice usando jQuery), pero no pareció desencadenar nada:
import { mount } from 'enzyme'; page = <MyCoolPage />; pageMounted = mount(page); const button = pageMounted.find('#some_button'); expect(button.length).toBe(1); // It finds it alright button.simulate('click'); // Nothing happens#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((<Button onClick={mockCallBack}>Ok!</Button>)); 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((<Button onClick={mockCallBack}>Ok!</Button>)); 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((<Button onClick={mockCallBack}>Ok!</Button>)); 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 obsolescencia: Obsolescencia de .simulate() #2173
Usando Jest, puedes hacerlo así:
test('it calls start logout on button click', () => { const mockLogout = jest.fn(); const wrapper = shallow(<Component startLogout={mockLogout}/>); wrapper.find('button').at(0).simulate('click'); expect(mockLogout).toHaveBeenCalled(); });