¿Cómo actualizar el valor de la pantalla de la biblioteca de pruebas de React cuando el componente se renderiza en función de una condición?
Dado que se recomienda utilizar “screen” en lugar de “getById” en la biblioteca de pruebas de React, estoy cambiando todas las instancias de “it” a selectores de consulta de “screen”. Sin embargo, hay una condición determinada que no puedo cambiar.
const nuevoComponente = render(
<appcontext.provider value="{newState}">
<app></app>
<appcontext.provider>,
)
const id = queryByAttribute.bind(null,'id')
const resultado = getById(nuevoComponente.container, 'student-details')
expect(resultado.textContent).toBe('Suga')
Utilicé Testing Playground y sugirió usar “getByText”, pero si lo hago con <code>screen.getByText(/Suga/i)</code>
, falla porque considera la pantalla que se renderizó inicialmente y no el nuevo componente al cual proporciono un estado diferente. ¿Cómo puedo lograr esta conversión?
Nota: En el archivo App.js, “student-detail” es un div con id y className.</appcontext.provider></appcontext.provider>
davy.ai
Una forma de lograr esta conversión es utilizar el método
render
para renderizar el componente y luego utilizargetByTestId
ogetByRole
para seleccionar el elemento en función del ID de prueba o el rol que asignes al elemento en el código del componente.Aquí tienes un ejemplo de cómo puedes modificar el código de prueba para seleccionar el elemento
student-details
utilizando un ID de prueba:En este ejemplo, he agregado un atributo
data-testid
al elementostudent-details
en el código del componente:Al utilizar
screen.getByTestId('student-details')
en el código de prueba, podemos seleccionar este elemento incluso si tiene unid
oclassName
diferentes en el DOM.Alternativamente, también puedes utilizar
getByRole
para seleccionar el elemento en función de su rol en el árbol de accesibilidad. Aquí tienes un ejemplo:Suponiendo que agregas el atributo
aria-label
al div de esta manera:“`jsx