Simular un clic de botón en Jest

Simular el clic de un 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 intenté (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 Usando Jest

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 Sinon

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 Usando 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 respuesta aceptada están siendo obsoletas

# 4 Llamar a prop directamente

Enzyme simulate se supone que se eliminará en la versión 4. El responsable principal sugiere que se invoquen directamente las funciones prop, que es lo que simulate hace 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 prop los llaman y probar unitariamente los métodos de instancia.

Puede llamar a hacer clic, por ejemplo:

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

O

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

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

Usando Jest, puede 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();
});

Puede usar algo como esto para llamar al controlador escrito al hacer clic:

import { shallow } from 'enzyme'; // Mount is not required

page = <MyCoolPage />;
pageMounted = shallow(page);

// The below line will execute your click function
pageMounted.instance().yourOnClickFunction();

Además de las soluciones que se sugirieron en los comentarios de los hermanos, puede cambiar un poco su enfoque de prueba y probar no toda la página a la vez (con un árbol de componentes secundarios profundo), sino realizar una prueba de componentes aislada . Esto simplificará las pruebas deonClick() eventos similares (vea el ejemplo a continuación).

La idea es probar solo un componente a la vez y no todos juntos. En este caso, todos los componentes secundarios serán simulados usando la función jest.mock () .

A continuación se muestra un ejemplo de cómo onClick()se puede probar el evento en un SearchFormcomponente aislado usando Jest y react-test-renderer .

import React from 'react';
import renderer from 'react-test-renderer';
import { SearchForm } from '../SearchForm';

describe('SearchForm', () => {
  it('should fire onSubmit form callback', () => {
    // Mock search form parameters.
    const searchQuery = 'kittens';
    const onSubmit = jest.fn();

    // Create test component instance.
    const testComponentInstance = renderer.create((
      <SearchForm query={searchQuery} onSearchSubmit={onSubmit} />
    )).root;

    // Try to find submit button inside the form.
    const submitButtonInstance = testComponentInstance.findByProps({
      type: 'submit',
    });
    expect(submitButtonInstance).toBeDefined();

    // Since we're not going to test the button component itself
    // we may just simulate its onClick event manually.
    const eventMock = { preventDefault: jest.fn() };
    submitButtonInstance.props.onClick(eventMock);

    expect(onSubmit).toHaveBeenCalledTimes(1);
    expect(onSubmit).toHaveBeenCalledWith(searchQuery);
  });
});

Necesitaba probar un poco el componente de un botón. Estas pruebas funcionan para mí ;-)

import { shallow } from "enzyme";
import * as React from "react";
import Button from "../button.component";

describe("Button Component Tests", () => {
    it("Renders correctly in DOM", () => {
        shallow(
            <Button text="Test" />
        );
    });
    it("Expects to find button HTML element in the DOM", () => {
        const wrapper = shallow(<Button text="test"/>)
        expect(wrapper.find('button')).toHaveLength(1);
    });

    it("Expects to find button HTML element with className test in the DOM", () => {
        const wrapper = shallow(<Button className="test" text="test"/>)
        expect(wrapper.find('button.test')).toHaveLength(1);
    });

    it("Expects to run onClick function when button is pressed in the DOM", () => {
        const mockCallBackClick = jest.fn();
        const wrapper = shallow(<Button onClick={mockCallBackClick} className="test" text="test"/>);
        wrapper.find('button').simulate('click');
        expect(mockCallBackClick.mock.calls.length).toEqual(1);
    });
});