“无法找到带有文本的元素..”在反应测试期间

Posted 2023-03-08

【中文标题】“无法找到带有文本的元素..”在反应测试期间

【英文标题】："Unable to find an element with the text.." during react testing

【发布时间】：2022-01-05 08:46:30

【问题描述】：

我有一个小型 React/TypeScript/GraphQL 应用程序，它连接到 API、获取产品并将它们显示在页面上。

我正在尝试使用getByText 创建一个测试，检查产品名称是否在 GraphQL 模拟之后的文档中，但我不断收到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>
    </>
  );

【参考方案1】：

如果您只是在测试一个“哑”组件（也就是只呈现一些 html 并且没有其他逻辑的组件），那么看起来您不需要 MockedProvider。如果您正在测试使用useQuery 或useMutation 的组件，则只需要MockedProvider，在这种情况下，这些挂钩将返回您提供的mock.result 值。尝试完全删除 MockedProvider 并使用一些道具渲染组件，看看是否有帮助。