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.

React Testing Library + Material UI (v4) Componente Oculto

06 Aug, 2023 Programación

Soy nuevo en la biblioteca de pruebas de React. Quería probar mi código envuelto con el componente Hidden de Material UI pero la prueba falla (aunque mi componente sea visible en el DOM).

Componente

import { Hidden } from '@material-ui/core'
import React from 'react'

function App() {

    return (
        <>
            <h4>Esto siempre es visible</h4>
            <hidden xsup="{true}">
                <h3>El elemento oculto</h3>
            </hidden>

    )

}

xsUp configurado como true oculta el h3 en el DOM y false muestra el h3 en el DOM.

Pero no entiendo por qué la prueba siguiente falla, incluso cuando el componente es visible en el DOM.

Prueba

test("El elemento oculto debe ser visible", async () => {
  render(<app></app>);

  const h3 = await screen.findByRole('heading', { name: "El elemento oculto" }) // mismo efecto si uso screen.getByRole o getByText

  expect(h3).toBeInTheDocument();
});

Nota: Probé si el h3 no está envuelto en el elemento Hidden y la prueba pasa. Pero configurar xsUp como true o false falla la prueba.

Por favor, prueba aquí https://codesandbox.io/embed/magical-boyd-uzv9w?fontsize=14&hidenavigation=1&theme=dark

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el código de prueba es que findByRole busca elementos que son visibles para el usuario, y al establecer xsUp en true, el componente Hidden no se está renderizando en el DOM en absoluto, aunque aún existe en la jerarquía del componente. Por lo tanto, el elemento h3 no puede ser encontrado por findByRole, lo que hace que la prueba falle.

    Para probar adecuadamente la visibilidad del elemento h3 envuelto en el componente Hidden, debes buscarlo usando queryByRole, que busca elementos independientemente de su visibilidad. Luego, puedes utilizar el comparador toHaveStyle de @testing-library/jest-dom para probar la propiedad display del elemento h3, que debería ser none cuando xsUp es true y block cuando xsUp es false.

    Aquí tienes un ejemplo de cómo modificar el código de prueba para usar queryByRole y toHaveStyle:

    import { render, screen } from "@testing-library/react";
import { toHaveStyle } from "@testing-library/jest-dom";
import App from "./App";

expect.extend({ toHaveStyle });

test("El elemento Hidden debería ser visible", async () => {
  render(<app></app>);

  const h3 = screen.queryByRole("heading", { name: "El elemento oculto" });

  expect(h3).toBeInTheDocument(); // Comprobar que el elemento existe en el DOM
  expect(h3).toHaveStyle("display: none;"); // Comprobar que el elemento está oculto inicialmente

  // Hacer clic en algún lugar del documento para forzar un nuevo renderizado con xsUp establecido en false
  document.body.click();

  expect(h3).toHaveStyle("display: block;"); // Comprobar que el elemento es visible después de que xsUp se establece en false
});

    Ten en cuenta que el comparador toHaveStyle espera una cadena con la propiedad y el valor CSS a probar. En este caso, estamos probando la propiedad display, que puede tener un valor de none o block. Además, estamos activando manualmente un nuevo renderizado haciendo clic en el documento después de que el componente se haya montado, para simular el efecto de cambiar la prop xsUp.

Comments are closed.