如何使用Jest正确编写React嵌套组件的测试用例

• toHaveTextContent 仅支持传入字符串类型的匹配规则，你直接传入data对象会触发类型错误，无法完成文本断言
• 自定义组件StaticContent不会默认透传data-testid属性到内部生成的真实DOM节点，直接调用screen.getByTestId("benifits")大概率找不到目标元素，除非你在StaticContent组件内部主动将该属性绑定到根DOM节点上
• 当前写法会完整渲染StaticContent内嵌的面包屑、页脚等所有子组件，单元测试应当聚焦当前被测组件的逻辑，无关的嵌套子组件建议做Mock处理，避免子组件本身的报错干扰当前组件的测试结果

推荐优先写聚焦组件本身逻辑的单元测试，通过Mock隔离无关依赖：

import { render, screen } from "@testing-library/react";
import Content from '../pages/Content';
import React from 'react';

// 替换为你项目中StaticContent组件的实际引入路径
jest.mock('../components/StaticContent', () => {
  // 返回Mock组件，透传所有props方便断言
  return (props) => <div data-testid="mock-static-content" {...props} />
});

const expectedData = {
  bannerTitle: 'storingData',
  image: 'https//:google.png',
  title: 'Benefits',
  content: 'demodata'
}

test("Content组件正确向StaticContent传递配置参数", () => {
  render(<Content/>);
  const staticContentInstance = screen.getByTestId("mock-static-content");
  // 校验pageTitle参数
  expect(staticContentInstance).toHaveAttribute('pageTitle', 'storingData');
  // 校验传入的data数据符合预期
  expect(staticContentInstance).toHaveProperty('data', expectedData);
});

如果你需要测试组件最终渲染的真实文本内容，不需要Mock子组件的话，需要先确保StaticContent已经将data-testid透传到根DOM，再针对具体文本做断言：

test("页面正确渲染预期内容", () => {
  render(<Content/>);
  const contentWrapper = screen.getByTestId("benifits");
  // 逐个断言可见文本，不要直接传入对象
  expect(contentWrapper).toHaveTextContent('storingData');
  expect(contentWrapper).toHaveTextContent('Benefits');
  expect(contentWrapper).toHaveTextContent('demodata');
});

• 优先阅读Testing Library官方文档，覆盖了React测试的核心原则、所有查询API、断言方法的使用示例，是最权威的参考
• 搭配Jest官方文档的基础章节学习，掌握Mock、测试生命周期、常用断言即可，不需要一开始就记忆所有冷门API
• 可以参考成熟开源React组件库的测试源码，这类项目的测试写法都经过生产场景验证，参考价值很高
• 学习过程中牢记核心原则：测试面向用户可感知的行为，不要测组件内部实现细节，比如不要断言组件内部state的具体值，只验证页面渲染结果、交互反馈是否符合预期

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