javascript - tab - Simular un botón de clic en broma

title html

Question

Simular un clic de botón parece una operación muy sencilla / estándar. Sin embargo, no puedo hacerlo funcionar en las pruebas de Jest.js.

Esto es lo que intenté (y también hacerlo usando jQuery), pero no pareció disparar 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

Answer 1

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);
// below line will execute your click function
pageMounted.instance().yourOnClickFunction();

Answer 2

Usando broma puedes hacerlo así:

test(''should call 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();
});

Answer 3

# 1 usando broma

Así es como uso la función de devolución de llamada simulada 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 enzyme La enzyme es una utilidad de prueba que hace que sea más fácil hacer valer y seleccionar sus componentes React.

# 2 usando Sinon

También puedes usar otro módulo llamado sinon que es una prueba independiente de espías, talones 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 puedes hacer tu propio espía ingenuo.

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