是否需要测试所有React组件无崩溃渲染？仅测试App组件足够吗？

一、是否需要为每个组件单独编写无崩溃渲染测试 #

不需要为所有组件都单独编写这类测试，你可以根据组件的类型和复杂度判断：

• 无需单独测试的组件：仅在单一父组件内使用、无复杂逻辑的纯展示组件（比如一个仅做样式封装的标题组件、只在当前页面用一次的侧边栏条目），这类组件在父组件的渲染测试中已经被覆盖，单独写测试只会增加冗余维护成本。
• 必须单独测试的组件：全局复用的公共组件、包含复杂状态/交互逻辑的业务组件、独立的路由页面组件，这类组件要么多处使用出问题影响范围大，要么逻辑复杂单独测试更容易定位问题，建议单独编写渲染测试。

另外你贴的第二个测试示例存在两处低级错误需要修正：一是导入组件错误（导入了App但实际要测AnotherComp），二是测试用例描述和实际测试内容不符，修正后的规范写法会在下文给出。

二、React组件测试核心要点与技巧 #

• 优先测试用户可感知的行为，不要测试内部实现：不要直接断言组件内部state的值、不要测试私有方法的返回结果，而是模拟用户操作后断言界面上的可见变化，比如点击提交按钮后是否出现成功提示、输入非法内容后是否展示错误文案，这种测试不会因为你重构组件内部逻辑就失效，实用性更高。
• 不要只写空的render测试：无崩溃渲染只是最基础的兜底，建议加一行简单的断言验证组件确实渲染出了预期内容，否则如果组件渲染空白但没有抛出异常，你的空测试根本发现不了问题。
• 测试时传入符合实际场景的模拟props：大部分组件都依赖props运行，不要直接不带参数渲染，比如一个商品卡片组件需要接收商品信息参数，测试时要构造符合格式的模拟数据传入，还原真实使用场景。
• 公共组件需要覆盖边界场景：比如全局封装的按钮组件，要分别测试普通状态、禁用状态、加载状态、点击回调是否正常触发等场景，避免某个场景出问题影响所有用到的业务模块。
• 优先使用用户视角的查询规则：用@testing-library的查询能力时，优先按role、可见文本查询元素，实在没有合适的查询方式再用自定义test-id，更贴近用户实际使用时的感知逻辑。

三、规范的组件渲染测试示例 #

基础无崩溃+简单断言的测试写法 #

import { render, screen } from "@testing-library/react";
import AnotherComp from "./AnotherComp";

describe("AnotherComp", () => {
  test("renders AnotherComp component normally", () => {
    // 传入组件需要的模拟props
    render(<AnotherComp title="测试标题" content="测试内容" />);
    // 断言预期的内容确实被渲染出来
    expect(screen.getByRole('heading', { name: '测试标题' })).toBeInTheDocument();
  });
});

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