Hay dos formas de usar consultas usando react-testing-library .
Puede utilizar las consultas devueltas por el método de render :
import React from 'react' import { render } from '@testing-library/react' ... const { getByText } = render(<div>Foo</div>) expect(getByText('Foo')).toBeInTheDocument() O puede usar el objeto de screen :
import React from 'react' import { render, screen } from '@testing-library/react' ... render(<div>Foo</div>) expect(screen.getByText('Foo')).toBeInTheDocument()Pero no hay ninguna indicación en la documentación sobre cuál es la mejor opción para usar y por qué.
¿Alguien me puede iluminar?
@testing-library/dom proporciona screen , que es sobre lo que se basa @testing-library/react . Al usar los métodos de screen , consultarán dentro del elemento html <body> , como se describe en los documentos :
Debido a que consultar todo el documento.cuerpo es muy común, la biblioteca de prueba DOM también exporta un objeto de pantalla que tiene cada consulta que está previnculada a documento.cuerpo.
render() solo está en @testing-library/react . Devuelve un objeto similar a la screen y el valor predeterminado es vincular también las consultas al <body> . De forma predeterminada, hay poca diferencia, pero puede personalizar su comportamiento pasándole options .
Por ejemplo, puede especificar un elemento que no sea el <body> para realizar la consulta e incluso puede proporcionar métodos de consulta personalizados .
Para responder a su pregunta sobre cuál es el mejor, diría que usar render() es mejor porque las options lo hacen más flexible, pero para citar los documentos :
A menudo no necesitará especificar opciones
Aún así, mi preferencia sería usar los métodos provistos por render() , porque si alguna vez decide agregar opciones, no necesitará recordar cambiar todas sus consultas.
La última opción recomendada por el autor react-testing-library Kent C. Dodds , es usar screen .
El beneficio de usar la pantalla es que ya no necesita mantener actualizada la estructura de la llamada de representación a medida que agrega o elimina las consultas que necesita. Solo necesitas escribir pantalla. y deja que el autocompletado mágico de tu editor se encargue del resto.
La única excepción a esto es si está configurando el contenedor o el elemento base que probablemente debería evitar hacer (honestamente, ya no puedo pensar en un caso de uso legítimo para esas opciones y solo existen por razones históricas en este punto).
Fuente: https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen
Simplemente agregue a la primera línea de su archivo de prueba, para permitir el acceso a los elementos DOM virtuales,
/** * @jest-environment jsdom */Referencia: