“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
return (
<>
Grandes características nuevas
);
}
davy.ai
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 usandoscreen.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 reemplazandoscreen.getByText('iPad 5g')
con: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 deldiv
raíz) que contiene el texto del nombre del producto. La función auxiliartieneTexto
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ónexpect
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 elementospan
. Esto haría más fácil encontrar el texto utilizandogetByText
:Con esta modificación, podemos encontrar el nombre del producto con:
expect(screen.getByText('iPad 5g')).toBeInTheDocument();