Tengo esta pieza de código Jest + Testing Library:
describe('Component', () => { const { container } = renderComponent(); // defined outside of describe block test('Renders test1', () => { expect(container.getElementsByClassName('test1').length).toBe(1); }); test('Renders test2', () => { expect(container.getElementsByClassName('test2').length).toBe(1); }); }); Ambas pruebas deberían pasar, pero solo una de ellas lo hace. El otro siempre falla.
Si ejecuto solo una prueba a la vez usando .only , siempre pasa.
Los documentos oficiales de Jest dicen:
Si tiene una prueba que a menudo falla cuando se ejecuta como parte de una suite más grande, pero no falla cuando la ejecuta solo, es una buena apuesta que algo de una prueba diferente esté interfiriendo con esta. A menudo, puede solucionar esto borrando algún estado compartido con beforeEach.
Pero no estoy seguro de qué es lo que está interfiriendo aquí, exactamente. ¿Llamar a getElementsByClassName en paralelo puede conducir a este problema?
No, getElementsByClassName no es intrusivo. Como en, se supone que llamarlo no debe hacer ningún cambio en el DOM que se consulta. 1
No está mostrando lo que renderComponent() y podría ser relevante. Sin embargo, por lo que describe, llamarlo una vez por prueba en lugar de una vez por conjunto de pruebas debería solucionar el problema. 2
Esto debería funcionar:
let container; describe('Component', () => { beforeEach(() => { container = renderComponent().container; }) it('Renders test1', () => { expect(container.getElementsByClassName('test1').length).toBe(1); }); it('Renders test2', () => { expect(container.getElementsByClassName('test2').length).toBe(1); }); });1 JavaScript es fluido y poderoso. Uno podría, por ejemplo, escribir un captador que muta el objetivo, en lugar de simplemente leerlo. Pero las posibilidades de que dicho antipatrón se use dentro de las herramientas proporcionadas por una biblioteca de prueba son bajas.
2 Esto no debe verse como una "manera engañosa de hacer pasar las pruebas" . Es la forma correcta de probar. Sus pruebas no deben reutilizar el mismo DOM, ya que no desea que ningún cambio en ese DOM se propague a través de múltiples pruebas.
Dentro del bloque de descripción antes de agregar la prueba ,
afterEach(() => { jest.restoreAllMocks(); });finalmente me ayudó a eliminar el espía en broma