Erazihel
Hay dos formas de usar consultas usando react-testing-library.
Puede utilizar las consultas devueltas por el render método:
import React from 'react'
import { render } from '@testing-library/react'
...
const { getByText } = render(<div>Foo</div>)
expect(getByText('Foo')).toBeInTheDocument()
O puedes usar el screen objeto:
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?
rebase
La última opción recomendada por el react-testing-library autor Kent C Dodds él mismo es para usar screen.
El beneficio de usar
screenes que ya no necesita mantener elrenderactualice la desestructuración de llamadas a medida que agrega o elimina las consultas que necesita. Solo necesitas teclearscreen.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
containerobaseElementlo 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 momento).
Fuente: https://kentcdodds.com/blog/errores-comunes-con-react-testing-library#not-using-screen
-
¿Qué significa esta parte?
keep the render call destructure up-to-date as you add/remove the queries you need– Brady Dowling
7 de enero de 2021 a las 19:38
-
@BradyDowling
renderdevuelve un objeto que se puede desestructurar, por ejemploconst { getByText } = render(<MyComponent />). Si desea utilizar otra consulta, deberá actualizar este objeto desestructurado:const { getByText, getByLabelText } = render(<MyComponent />). Conscreentodos los métodos están disponibles en el propio objeto (screen.getByText,screen.getByLabelTextetc.)– Joey MH
12 de enero de 2021 a las 9:23
-
@JoeyM-H
With screen, all the methods are available on the object itselfParece que esto ya es cierto para el componente que se devuelve del renderizado. Parece que puede omitir la desestructuración del componente renderizado y obtener el mismo beneficio, pero creo que me estoy perdiendo algo importante.– Brady Dowling
12 de enero de 2021 a las 19:33
-
@BradyDowling tiene razón, pero aún es un poco menos detallado usar un importado globalmente
screenen lugar de asignar el retorno derender()a una variable cada vez, especialmente si está escribiendo muchas pruebas en un archivo. Aquí está el PR de la función, con una explicación más larga del autor. github.com/testing-library/dom-testing-library/pull/412 Aparentemente, también ayuda a evitar otros casos extremos.– Joey MH
13 de enero de 2021 a las 14:02
-
De la discusión, parece que el objeto devuelto de la función de renderizado podría ser específico del marco, pero el
screenEl objeto será independiente del marco, lo que hará que sus pruebas sean más resistentes y consistentes en todos los proyectos.– Brady Dowling
14 de enero de 2021 a las 16:22
screen Es provisto por @testing-library/domQue es que @testing-library/react está construido sobre. Al usar el screen métodos, consultarán dentro del html <body> elemento, como se describe en el 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 esta en @testing-library/react. Devuelve un objeto similar a screen y el valor predeterminado es vincular también las consultas al <body>. De forma predeterminada, hay poca diferencia, pero puede personalizar su comportamiento al pasando en opciones.
Por ejemplo, puedes especificar un elemento otro qué el <body> para consultar dentro, e incluso puede proporcionar métodos de consulta personalizados.
Para responder a su pregunta de cuál es el mejor, diría que usando render() es mejor porque el options hacerlo más flexible, pero para citar el documentos:
A menudo no necesitará especificar opciones
Aún así, mi preferencia sería utilizar los métodos proporcionados por render()porque si alguna vez decide agregar opciones, no necesitará acordarse de cambiar todas sus consultas.