“No se pudo encontrar un elemento con el texto..” durante las pruebas de react.

Tengo una pequeña aplicación React/TypeScript/GraphQL que se conecta a una API, busca productos y los muestra en la página.

Estoy tratando de crear una prueba que verifique si el nombre del producto está en el documento después de una burla de GraphQL, utilizando “getByText”, pero sigo obteniendo “TestingLibraryElementError: No se puede encontrar un elemento con el texto: iPad 5g. Esto podría deberse a que el texto está fragmentado en múltiples elementos. En este caso, puede proporcionar una función para su comparador de texto para hacer su búsqueda más flexible “.

También intenté usar “getByRole” (ver abajo), pero eso me da el error “TestingLibraryElementError: No se puede encontrar un elemento accesible con el papel “paragraph” y nombre “/month to month/i'” .

¿Hay una mejor manera de hacer esto? ¿Cómo puedo verificar si el nombre del producto se renderizó correctamente? Agradezco cualquier ayuda.

ProductCard.test.js

importar React desde “react”;
importar { render, pantalla } de “@testing-library/react”;
importar TestRenderer desde ‘react-test-renderer’;
importar { MockedProvider } de ‘@apollo/client/testing’;
importar ProductCard de “../ProductCard”;
importar { LOAD_PRODUCTS } de “../GraphQL/Queries”;
import ‘@testing-library/jest-dom’;

it(‘renders ProductCard successfully’, async () => {
const productMock = {
request: {
query: LOAD_PRODUCTS,
},
resultado: {
datos: { productos: { nombreProducto: ‘iPad 5g’, código: ‘i5g’, precio: 599.99 } },
},
};

const component = TestRenderer.create(
,
);
esperar nuevo Promise(resolve => setTimeout(resolve, 0));
expect(screen.getByText(iPad 5g)).toBeInTheDocument();
// expect(screen.getByRole(‘paragraph’, { name: /iPad 5g/i })).toBeInTheDocument();
});

ProductCard.tsx

// imports
// …
// …

// tipos de TypeScript
// …
// …

const ProductCard: React.FC = ({ productName, price }) => {

return (
<>
{productName}
{price}

Grandes características nuevas

);
}

davy.ai

June 10, 2023 at 11:02 am

El problema con la prueba parece ser causado por el hecho de que el nombre del producto se está renderizando dentro de un componente Typography, que luego está encerrado dentro de otras etiquetas. Al intentar encontrar el nombre usando screen.getByText(), se trata como una cadena única, y es posible que no se encuentre si el texto está fragmentado por otros elementos.

Una solución a esto sería utilizar una función personalizada para buscar texto para permitir más flexibilidad. En el caso de ProductCard.test.js, podríamos modificar la prueba existente reemplazando screen.getByText('iPad 5g') con:

expect(screen.getByText((contenido, nodo) => {
  const tieneTexto = (texto) => nodo => nodo.textContent === texto;
  const textoNombreProducto = tieneTexto('iPad 5g');
  const tipografía = nodo.closest('div > * > * > :last-child');
  return tipografía && textoNombreProducto(tipografía);
})).toBeInTheDocument();

Esta función de búsqueda personalizada encuentra el div > * > * > :last-child más cercano (es decir, el último elemento secundario del penúltimo hijo del penúltimo hijo del div raíz) que contiene el texto del nombre del producto. La función auxiliar tieneTexto se utiliza para comparar el texto de cada elemento en la ruta de búsqueda con “iPad 5g” y devuelve la primera coincidencia. Finalmente, la función expect verifica que el texto esté presente en el documento.

Alternativamente, podríamos modificar el componente ProductCard para envolver el nombre del producto en una etiqueta más sencilla, como un elemento span. Esto haría más fácil encontrar el texto utilizando getByText:

const ProductCard: React.FC<props> = ({ nombreProducto, precio }) => {

  return (
    <>
      <typography><span>{nombreProducto}</span></typography>
      <typography>{precio}</typography>
      <typography><p>Nuevas características fantásticas</p></typography>
      <button>Comprar ahora</button>

  );
}

Con esta modificación, podemos encontrar el nombre del producto con:

expect(screen.getByText('iPad 5g')).toBeInTheDocument();

Answer

davy.ai

June 10, 2023 at 11:02 am
El problema con la prueba parece ser causado por el hecho de que el nombre del producto se está renderizando dentro de un componente Typography, que luego está encerrado dentro de otras etiquetas. Al intentar encontrar el nombre usando screen.getByText(), se trata como una cadena única, y es posible que no se encuentre si el texto está fragmentado por otros elementos.

Una solución a esto sería utilizar una función personalizada para buscar texto para permitir más flexibilidad. En el caso de ProductCard.test.js, podríamos modificar la prueba existente reemplazando screen.getByText('iPad 5g') con:
```
expect(screen.getByText((contenido, nodo) => {
  const tieneTexto = (texto) => nodo => nodo.textContent === texto;
  const textoNombreProducto = tieneTexto('iPad 5g');
  const tipografía = nodo.closest('div > * > * > :last-child');
  return tipografía && textoNombreProducto(tipografía);
})).toBeInTheDocument();
```
Esta función de búsqueda personalizada encuentra el div > * > * > :last-child más cercano (es decir, el último elemento secundario del penúltimo hijo del penúltimo hijo del div raíz) que contiene el texto del nombre del producto. La función auxiliar tieneTexto se utiliza para comparar el texto de cada elemento en la ruta de búsqueda con “iPad 5g” y devuelve la primera coincidencia. Finalmente, la función expect verifica que el texto esté presente en el documento.

Alternativamente, podríamos modificar el componente ProductCard para envolver el nombre del producto en una etiqueta más sencilla, como un elemento span. Esto haría más fácil encontrar el texto utilizando getByText:
```
const ProductCard: React.FC<props> = ({ nombreProducto, precio }) => {

  return (
    <>
      <typography><span>{nombreProducto}</span></typography>
      <typography>{precio}</typography>
      <typography><p>Nuevas características fantásticas</p></typography>
      <button>Comprar ahora</button>

  );
}
```
Con esta modificación, podemos encontrar el nombre del producto con:

expect(screen.getByText('iPad 5g')).toBeInTheDocument();

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

“No se pudo encontrar un elemento con el texto..” durante las pruebas de react.

Answer

davy.ai