es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Simular un clic en un elemento cuando se utiliza element.eventlistener en la configuración de jest + enzyme

Simular un clic en un elemento cuando se utiliza element.eventlistener en la configuración de jest + enzyme

21 Jul, 2023 Programación

Tengo un componente llamado <MyComponent>. Dentro del componente tengo un <button>Haz clic</button> que tiene un event listener en el evento de clic añadido en useEffect.


useEffect(() => {
const btn = document.getElementById('button');
if (btn) {
btn.addEventListener('click', onButtonClicked, false);
}
return function cleanupListener() {
if (btn) btn.removeEventListener('click', onButtonClicked);
};
}, []);

Necesito simular un clic en ese botón en una prueba utilizando jest + enzyme.
He revisado una de las respuestas que tenía una solución como esta, pero no funcionó.

beforeEach(() => {
  const map = {};
  const namedByRefComponent = Wrapper.find("button");
  const namedByRefDomNode = namedByRefComponent.getDOMNode();
  const namedByRefDomNode = ReactDOM.findDOMNode(namedByRefComponent);
  namedByRefDomNode.addEventListener = jest
    .fn()
    .mockImplementation((event, cb) => {
      map[event] = cb;
    });
});

¿Alguien puede ayudarme con una nueva solución o completar la solución anterior, porque no puedo entenderlo?

Gracias de antemano.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para simular un evento de clic en un botón dentro de un componente utilizando Jest y Enzyme, puedes seguir estos pasos:

    1. Importa la función mount de Enzyme y el componente que deseas probar:
    import { mount } from 'enzyme';
import MyComponent from './MyComponent';
    1. Crea un caso de prueba que monte el componente:
    describe('<mycomponent></mycomponent>', () => {
  it('debería simular un clic en el botón', () => {
    const wrapper = mount(<mycomponent></mycomponent>);
  });
});
    1. Obtén una referencia al botón dentro del componente:
    describe('<mycomponent></mycomponent>', () => {
  it('debería simular un clic en el botón', () => {
    const wrapper = mount(<mycomponent></mycomponent>);
    const button = wrapper.find('button');
  });
});
    1. Simula un evento de clic en el botón utilizando el método simulate:
    describe('<mycomponent></mycomponent>', () => {
  it('debería simular un clic en el botón', () => {
    const wrapper = mount(<mycomponent></mycomponent>);
    const button = wrapper.find('button');
    button.simulate('click');
  });
});
    1. Verifica que la función de devolución de llamada adjunta al botón sea llamada:
    describe('<mycomponent></mycomponent>', () => {
  it('debería simular un clic en el botón', () => {
    const mockFn = jest.fn();
    const wrapper = mount(<mycomponent onbuttonclicked="{mockFn}"></mycomponent>);
    const button = wrapper.find('button');
    button.simulate('click');
    expect(mockFn).toHaveBeenCalledTimes(1);
  });
});

    Ten en cuenta que en el paso 5, pasamos una función simulada como una propiedad al componente y verificamos que esta función sea llamada cuando se hace clic en el botón. Esto es un ejemplo de cómo puedes probar el comportamiento de un componente sin depender de detalles de implementación como useEffect o addEventListener.

Comments are closed.