如何正确测试React父组件？解决父子组件测试重复困惑

这不代表你的组件设计有问题，父子组件测试重复是前端测试中的常见场景，核心是要明确不同层级组件的测试关注点，避免无效重复。

一、ParentComponent（TableWithFilters）的核心测试点（子组件测试未覆盖的部分） #

你不需要重复测试子组件自身的UI渲染或内部逻辑，重点关注子组件间的交互逻辑和父组件独有的业务逻辑：

• 验证过滤逻辑的正确性：
  • 传入包含不同名称的列表，模拟提交过滤条件后，检查TableComponent接收的列表是否为过滤后的结果（注意你的示例代码中，TableComponent当前传入的是原list，应该改为filteredList，否则过滤逻辑不会生效）
  • 测试边界场景：过滤条件为空时，表格展示完整列表；过滤条件匹配不到任何项时，表格展示空列表；大小写不敏感的过滤规则是否正常工作
• 验证子组件与父组件的通信链路：
  • 模拟FilterComponent提交过滤条件，检查父组件的filters状态是否正确更新
  • 确认过滤条件更新后，filteredList是否按预期重新计算（可结合useMemo的依赖项验证，比如列表长度变化但过滤条件不变时，是否复用之前的计算结果）
• 验证性能优化逻辑的正确性：
  • 检查useMemo的依赖项是否合理（你的示例中用list.length作为依赖存在漏洞：列表内容变化但长度不变时，过滤结果不会更新，建议改为整个list）
  • 验证useCallback的依赖项是否正确，避免子组件不必要的重渲染

二、如何避免测试重复？ #

• Mock子组件，聚焦父组件逻辑：
  测试ParentComponent时，用测试框架（如Jest）把子组件mock掉，比如：

  jest.mock('./FilterComponent', () => ({ onFiltersSubmit }) => (
    <button onClick={() => onFiltersSubmit({ name: 'test' })} />
  ));
  jest.mock('./TableComponent', () => ({ list }) => <div data-testid="table">{JSON.stringify(list)}</div>));
  

  这样你只需要验证：点击mock的Filter组件后，Table组件接收的列表是否符合过滤预期，无需重复测试子组件的输入框、按钮渲染等细节。
• 明确测试分层：
  • 单元测试：单独测试子组件的独立逻辑（如Filter的提交触发、Table的列表渲染），以及父组件的纯函数（如filterPredicate）
  • 集成测试：仅测试父子组件间的交互链路（如提交过滤后表格内容更新）

三、你的示例代码小修正 #

代码里有几处细节问题需要调整：

1. 状态变量命名不一致：

// 原代码：useState声明的是filter，后续用的是filters/setFilters
const [filters, setFilters] = useState({name: ""});

2. TableComponent传入正确的过滤后列表：

<TableComponent list={filteredList} />

3. 修正useMemo的依赖项：

const filteredList = useMemo(() => {
  return filters.name ? list.filter(filterPredicate) : list;
}, [filters.name, list]); // 替换list.length为list

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