Estoy tratando de usar la biblioteca de prueba para buscar elementos DOM después de un fireEvent.click. Sé que necesito esperar después del fireEvent, pero no estoy seguro de por qué simplemente usar await no funciona. A continuación se muestra la misma prueba escrita de dos maneras: la primera falla, la segunda pasa. No entiendo por qué falla el primero... ¡Estoy muy agradecido por cualquier información!
pd: sé que la espera está en desuso y se prefiere esperar, sin embargo, debido a algunas limitaciones, no puedo actualizar la versión en este momento :(
PRUEBA FALLIDA
// This test fails with the following error and warning: // Error: Unable to find an element by: [data-test="name_wrapper"] // Warning: An update to OnlinePaymentModule inside a test was not wrapped in act(...). it('this is a failing test...why', async () => { const { getByText, getByTestId } = render(<Modal {...props} />); const button = getByText('open modal'); fireEvent.click(button); const nameWrapper = await getByTestId('name_wrapper'); expect( nameWrapper.getElementsByTagName('output')[0].textContent ).toBe('Jon Doe'); const numberWrapper = await getByTestId('number_wrapper'); expect( numberWrapper.getElementsByTagName('output')[0].textContent ).toBe('123456'); }); // This test passes with no warnings it('this is a passing test...why', async () => { const { getByText, getByTestId } = render(<Modal {...props} />); const button = getByText('open modal'); fireEvent.click(button); await wait(() => { const nameWrapper = getByTestId('name_wrapper'); expect( nameWrapper.getElementsByTagName('output')[0].textContent ).toBe('Jon Doe'); const numberWrapper = getByTestId('number_wrapper'); expect( numberWrapper.getElementsByTagName('output')[0].textContent ).toBe('123456'); }) });5 meses después, vuelvo a responder mi pregunta (he aprendido mucho desde que publiqué esta pregunta jajaja)....
En primer lugar, dado que han pasado 5 meses, quiero subrayar que, si es posible, es mejor usar la biblioteca userEvent en lugar de fireEvent .
También sería negligente no mencionar que hay muchos antipatrones en el código... Solo debe hacer una afirmación en waitFor . Debe evitar usar getByTestId en favor de alternativas más accesibles.
Y finalmente, la razón por la que fallaba la primera prueba es que no puede usar wait con getBy* . getBy no es asíncrono y no esperará. Esta hubiera sido la mejor solución:
fireEvent.click(button); const nameWrapper = await findByTestId('name_wrapper'); Entonces la prueba habría esperado a que el elemento nameWrapper estuviera disponible.
La segunda prueba pasó porque getBy está envuelto en la utilidad asíncrona de RTL, wait ( wait ahora está obsoleta en favor de waitFor ). Eso es esencialmente lo que hace findBy bajo el capó: findBy es la versión asíncrona de getBy .
Cuando publiqué la pregunta, no entendí completamente que await es una palabra clave de Javascript (y solo azúcar sintáctica para hacer que el código espere una promesa de resolución). wait (ahora waitFor ) es una utilidad de RTL que hará que la ejecución de la prueba espere hasta que la devolución de llamada no arroje un error.