Urticaria
Estoy escribiendo algunas pruebas para una aplicación React usando Biblioteca de pruebas. Quiero verificar que aparece algún texto, pero necesito verificar que aparezca en un lugar en particular porque sé que ya aparece en otro lugar.
El Pruebas de documentación de la biblioteca para consultas dice que el getByText consulta toma un container parámetro, que supuse que te permite buscar dentro de ese contenedor. Traté de hacer esto, con el container y text parámetros en el orden especificado en los documentos:
const container = getByTestId('my-test-id');
expect(getByText(container, 'some text')).toBeTruthy();
y me sale un error: matcher.test is not a function.
Si pongo los parámetros al revés:
const container = getByTestId('my-test-id');
expect(getByText('some text', container)).toBeTruthy();
Me sale un error diferente: Found multiple elements with the text: some text
Lo que significa que no está buscando dentro del contenedor especificado.
creo que no entiendo como getByText obras. ¿Qué estoy haciendo mal?
Gio Polvara
mejor usar within para este tipo de cosas:
render(<MyComponent />)
const { getByText } = within(screen.getByTestId('my-test-id'))
expect(getByText('some text')).toBeInTheDocument()
-
El seguimiento de la solución es s como getByText arroja un error si el texto no se puede encontrar. Entonces, ¿cuál es el punto de usar expect….toBeInTheDocument?
– jacobcan118
28 de agosto de 2021 a las 2:58
-
Esta no debería ser la respuesta aceptada a partir de la documentación: ‘ Evite desestructurar las consultas de
renderresultado, usoscreen.getByTestIden cambio’– Carmín Tambascia
17/03/2022 a las 14:30
-
@ carmine-tambascia, ¿tiene un enlace a esa cita en los documentos? Parece que no puedo encontrarlo.
– ddblair
7 de noviembre de 2022 a las 23:50
-
@ddblair desarrollar.sentry.dev/frontend/using-rtl/….
– Carmín Tambascia
8 de noviembre de 2022 a las 5:40
-
@carmine-tambascia Gracias. Sin embargo, parece que es solo un consejo por el bien del desarrollador, y nada más.
– ddblair
8 de noviembre de 2022 a las 19:36
Seth McClaine
Otra forma de hacer esto
import {render, screen} from '@testing-library/react';
...
render(<MyComponent />);
expect(screen.getByTestId('my-test-id')).toHaveTextContent('some text');
Tenga en cuenta que ahora se recomienda usar screen en lugar de los resultados de render.
(StackOverflow publica los puntos en un artículo de KC Dobbs que explica por qué: react-testing-library – Screen vs Render queries)
-
Es posible que deba agregar
import "@testing-library/jest-dom/extend-expect";para acceder a latoHaveTextContentemparejador como se describe aquí.– ggorlen–sobre la huelga LLM
5 de junio de 2021 a las 4:20
-
“…recomendado usar pantalla…” ¿Pero y eso? Más que pontificar, se agradecería un enlace de los que recomiendan.
– lmat – Reincorporar a Mónica
23 de agosto de 2021 a las 14:46
-
Aquí hay otra publicación de SO en la pantalla frente al renderizado que apunta a una explicación de KC Dobbs: stackoverflow.com/questions/61482418/…
– Seth McClaine
23 ago 2021 a las 17:00
-
Esto es simple y funciona perfectamente para mí 🙂 gracias
–Kevin Osvaldo
11 de enero a las 18:42
-
Parece una solución mucho mejor que la respuesta aceptada, que obliga a un estilo de codificación particular.
– kevr
19 de enero a las 1:33
De esta manera, puede ser más preciso, centrándose en un elemento específico:
expect(queryByTestId("helperText")?.textContent).toContain("Help me!");
Puedes agarrar el texto con
expect(container.textContent).toMatch('some text')– taystack
3 de mayo a las 14:45