如何测试接收父组件状态属性的子组件？测试遇断言错误

我之前也碰到过类似的测试坑，咱们一步步来排查解决：

1. 先确认PeriodModal的渲染逻辑 #

首先得搞清楚子组件PeriodModal是怎么用showModal这个props的：

• 如果子组件是根据showModal决定是否渲染整个组件（比如return showModal ? <ModalContent /> : null），那只有当showModal为true时，才会渲染实际的模态框内容；
• 如果子组件是始终渲染DOM，但用CSS控制显示/隐藏（比如style={{ display: showModal ? 'block' : 'none' }}），那组件DOM一直存在，只是视觉上隐藏。

这两种情况对应的测试查询方式完全不同，前者要查渲染的内容，后者可以查DOM元素的样式。

2. 检查测试代码的渲染方式与状态设置 #

情况A：用Enzyme测试类组件 #

如果你的父组件是类组件，测试时要注意两个点：

• 用mount而不是shallow：shallow只会渲染父组件本身，不会深入渲染子组件内部，没法验证模态框的内容是否真的显示；
• 正确更新父组件的showModalPeriod状态。

示例代码：

import { mount } from 'enzyme';
import ParentComponent from './ParentComponent';
import PeriodModal from './PeriodModal';

test('当showModalPeriod为true时，PeriodModal可见', () => {
  // 挂载父组件
  const wrapper = mount(<ParentComponent />);
  
  // 更新父组件状态，触发模态框显示
  wrapper.setState({ showModalPeriod: true });
  
  // 两种断言方式：
  // 1. 直接查询PeriodModal组件（适合父组件始终渲染子组件的场景）
  expect(wrapper.find(PeriodModal)).toHaveLength(1);
  
  // 2. 查询模态框内的具体可见元素（更推荐，验证实际渲染的内容）
  expect(wrapper.find('.period-modal__confirm-btn')).toBeInTheDocument();
});

情况B：用React Testing Library测试 #

React Testing Library更推荐查询用户能看到的元素，而非组件本身，示例代码：

import { render, screen } from '@testing-library/react';
import ParentComponent from './ParentComponent';

// 优化方案：如果父组件支持传入初始状态，直接传true会更方便测试
test('当showModalPeriod为true时，PeriodModal正常显示', () => {
  // 假设父组件支持通过props初始化状态
  render(<ParentComponent initialShowModalPeriod={true} />);
  
  // 查询模态框里的关键文本（比如删除确认提示）
  expect(screen.getByText('确定要删除这个周期吗？')).toBeInTheDocument();
});

// 如果父组件不支持props初始化，可以通过触发事件来显示模态框
test('点击删除按钮后，PeriodModal弹出', () => {
  render(<ParentComponent />);
  
  // 触发显示模态框的按钮点击
  screen.getByRole('button', { name: '删除周期' }).click();
  
  // 验证模态框可见
  expect(screen.getByText('确定要删除这个周期吗？')).toBeInTheDocument();
});

3. 排查其他潜在问题 #

• 模块Mock干扰：检查测试文件里有没有不小心mock了PeriodModal组件，导致实际组件没被渲染；
• 条件渲染位置：确认父组件是不是有条件地渲染PeriodModal（比如{this.state.showModalPeriod && <PeriodModal />}），而不是始终渲染。如果是前者，只有showModalPeriod为true时才会渲染组件；
• 状态更新时机：如果是异步状态更新，测试时需要等待状态生效（比如Enzyme的wrapper.update()，或是React Testing Library的waitFor）。

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