У меня есть небольшое приложение 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 () => {
  const productMock = {
    request: {
      query: LOAD_PRODUCTS,
    },
    result: {
      data: { products: { productName: 'iPad 5g', code: 'i5g', price: 599.99 } },
    },
  };

  const component = TestRenderer.create(
    <MockedProvider mocks={[productMock]} addTypename={false}>
      <ProductCard displayName={productMock.result.data.products.productName} price={productMock.result.data.products.price} />
    </MockedProvider>,
  );
  await new Promise(resolve => setTimeout(resolve, 0));  
  expect(screen.getByText(`iPad 5g`)).toBeInTheDocument();
  // expect(screen.getByRole('paragraph', { name: /iPad 5g/i })).toBeInTheDocument();
});

ProductCard.tsx

// imports 
// ... 
// ...

// TypeScript types 
// ... 
// ... 

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

  return (
    <>
      <Typography>{productName}</Typography>
      <Typography>{price}</Typography>
      <Typography><p>Great new features</p></Typography>
      <Button>Buy Now</Button>
    </>
  );
}
0
bourne2077 28 Ноя 2021 в 00:25

1 ответ

Лучший ответ

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

1
TechyTech 28 Ноя 2021 в 00:35