es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿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?

¿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?

06 Aug, 2023 Programació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>

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una forma de lograr esta conversión es utilizar el método render para renderizar el componente y luego utilizar getByTestId o getByRole 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:

    // Importa render y screen de React Testing Library
import { render, screen } from '@testing-library/react';

// Renderiza el componente
const newState = { name: 'Suga' };
render(
  <appcontext.provider value="{newState}">
    <app></app>
  </appcontext.provider>,
);

// Obtiene el elemento student-details utilizando el ID de prueba
const studentDetails = screen.getByTestId('student-details');

// Verifica el contenido de texto del elemento
expect(studentDetails.textContent).toBe('Suga');

    En este ejemplo, he agregado un atributo data-testid al elemento student-details en el código del componente:

    <div id="student-details" classname="student-details" data-testid="student-details">

    Al utilizar screen.getByTestId('student-details') en el código de prueba, podemos seleccionar este elemento incluso si tiene un id o className 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:

    // Obtiene el elemento student-details utilizando el rol
const studentDetails = screen.getByRole('region', { name: 'Student Details' });

    Suponiendo que agregas el atributo aria-label al div de esta manera:

    “`jsx

    “`

Comments are closed.