Simular un clic en un elemento cuando se utiliza element.eventlistener en la configuración de jest + enzyme
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.
davy.ai
Para simular un evento de clic en un botón dentro de un componente utilizando Jest y Enzyme, puedes seguir estos pasos:
mount
de Enzyme y el componente que deseas probar:simulate
: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
oaddEventListener
.