React测试GraphQL mock后getByText找不到目标文本元素问题求助

问题根因 #

你出现报错是测试代码存在三处明显错误：

• 渲染器混用：@testing-library/react提供的screen只能查询到同库render函数渲染的组件，你用react-test-renderer创建的组件完全不在screen的查询范围内，自然找不到元素
• props传值不匹配：ProductCard组件声明接收的产品名称属性是productName，但你测试时传的是displayName，组件拿到的productName为undefined，不可能渲染出iPad 5g文本
• MockedProvider使用逻辑错误：从你贴出的ProductCard代码来看，组件是直接接收外部属性渲染，自身不会发起GraphQL请求，完全不需要用MockedProvider包裹，也不需要定义query mock数据。如果你的实际业务中是组件内部调用LOAD_PRODUCTS拉取数据，那你就不应该手动给组件传产品名称、价格属性，否则会绕开GraphQL请求逻辑。

正确实现代码 #

情况1：ProductCard为纯展示组件，接收外部props渲染 #

修改后的ProductCard.test.js代码如下：

import React from "react";
import { render, screen } from "@testing-library/react";
import ProductCard from "../ProductCard";
import '@testing-library/jest-dom';

it('renders ProductCard product name correctly', () => {
  const mockProductName = 'iPad 5g';
  const mockPrice = 599.99;

  render(<ProductCard productName={mockProductName} price={mockPrice} />);

  // 两种校验方式二选一即可
  expect(screen.getByText(mockProductName)).toBeInTheDocument();
  // expect(screen.getByRole('paragraph', { name: mockProductName })).toBeInTheDocument();
});

情况2：ProductCard内部调用LOAD_PRODUCTS拉取数据 #

如果你的ProductCard实际是内部发起GraphQL请求，需要保留MockedProvider，同时不要手动传props，修改后代码如下：

import React from "react";
import { render, screen } from "@testing-library/react";
import { MockedProvider } from '@apollo/client/testing';
import ProductCard from "../ProductCard";
import { LOAD_PRODUCTS } from "../GraphQL/Queries";
import '@testing-library/jest-dom';

it('renders ProductCard product name correctly after GraphQL query', async () => {
  const productMock = {
    request: {
      query: LOAD_PRODUCTS,
    },
    result: {
      data: { products: { productName: 'iPad 5g', code: 'i5g', price: 599.99 } },
    },
  };

  render(
    <MockedProvider mocks={[productMock]} addTypename={false}>
      <ProductCard />
    </MockedProvider>,
  );

  // 用findBy异步等待请求完成、内容渲染，不需要手动写setTimeout
  const productNameEl = await screen.findByText('iPad 5g');
  expect(productNameEl).toBeInTheDocument();
});

内容的提问来源于stack exchange，提问作者bourne2077