Блог

У меня есть небольшое приложение React/TypeScript/GraphQL, которое подключается к API, извлекает продукты и отображает их на странице.

Я пытаюсь создать тест, который проверяет , есть ли название продукта в документе после макета GraphQL, с помощью getByText , но я продолжаю получать TestingLibraryElementError: Unable to find an element with the text: iPad 5g. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Я также пытался использовать getByRole (см. Ниже), но это дает мне ошибку TestingLibraryElementError: Unable to find an accessible element with the role "paragraph" and name '/month to month/i'

Есть ли лучший способ сделать это? Как я могу проверить, правильно ли отображено название продукта? Я ценю любую помощь.

ProductCard.test.js

 import React from "react"; import { render, screen } from "@testing-library/react"; import TestRenderer from 'react-test-renderer'; import { MockedProvider } from '@apollo/client/testing'; import ProductCard from "../ProductCard"; import { LOAD_PRODUCTS } from "../GraphQL/Queries"; import '@testing-library/jest-dom';  it('renders ProductCard successfully', async () =gt; {  const productMock = {  request: {  query: LOAD_PRODUCTS,  },  result: {  data: { products: { productName: 'iPad 5g', code: 'i5g', price: 599.99 } },  },  };   const component = TestRenderer.create(  lt;MockedProvider mocks={[productMock]} addTypename={false}gt;  lt;ProductCard displayName={productMock.result.data.products.productName} price={productMock.result.data.products.price} /gt;  lt;/MockedProvidergt;,  );  await new Promise(resolve =gt; setTimeout(resolve, 0));   expect(screen.getByText(`iPad 5g`)).toBeInTheDocument();  // expect(screen.getByRole('paragraph', { name: /iPad 5g/i })).toBeInTheDocument(); });  

Карточка продукта.tsx

 // imports  // ...  // ...  // TypeScript types  // ...  // ...   const ProductCard: React.FClt;Propsgt; = ({ productName, price }) =gt; {   return (  lt;gt;  lt;Typographygt;{productName}lt;/Typographygt;  lt;Typographygt;{price}lt;/Typographygt;  lt;Typographygt;lt;pgt;Great new featureslt;/pgt;lt;/Typographygt;  lt;Buttongt;Buy Nowlt;/Buttongt;  lt;/gt;  ); }  

Похоже, вам это не нужно MockedProvider , если вы просто тестируете «тупой» компонент (он же тот, который просто отображает некоторый HTML и не имеет другой логики). Вам это нужно только MockedProvider в том случае , если вы тестируете компонент, который использует useQuery или useMutation , и в этом случае эти крючки вернут указанное вами значение mock.result. Попробуйте полностью удалить MockedProvider и просто визуализируйте компонент с некоторыми реквизитами и посмотрите, поможет ли это.