如何使用Jest测试React中Switch分支的正确渲染输出

你这个Modal属于典型的分支路由型壳组件，测试核心是验证两个核心逻辑：

1. 传入不同modalType时，是否正确匹配并渲染对应的子Modal组件
2. 给子组件透传的props是否符合预期
   整个测试过程不需要深入各个子Modal的内部实现，保证单元测试的隔离性即可。

第一步：前置Mock配置 #

为了避免子组件真实实现干扰测试结果，首先用Jest的jest.mock把所有依赖的子组件替换成轻量的测试占位组件：

// Modal.test.jsx
// 模拟四个子Modal组件
jest.mock('../UpdateModal', () => () => <div data-testid="update-modal-mock" />);
jest.mock('../DeleteModal', () => () => <div data-testid="delete-modal-mock" />);
jest.mock('../AddModal', () => () => <div data-testid="add-modal-mock" />);
jest.mock('../InfoModal', () => () => <div data-testid="info-modal-mock" />);

// 引入测试依赖
import { render, screen } from '@testing-library/react';
import Modal from './Modal';

// 提取公共测试props，减少重复代码
const mockCommonProps = {
  isVisible: true,
  handleClose: jest.fn(),
  noteID: 'test-note-123'
};

第二步：编写核心测试用例 #

逐分支验证渲染匹配 #

直接验证每个modalType对应的目标组件是否被渲染，同时确认其他分支的组件不会被错误渲染：

// 测试update分支
test('modalType为update时正确渲染UpdateModal', () => {
  render(<Modal {...mockCommonProps} modalType="update" />);
  expect(screen.getByTestId('update-modal-mock')).toBeInTheDocument();
  // 排除其他分支误渲染
  expect(screen.queryByTestId('delete-modal-mock')).not.toBeInTheDocument();
  expect(screen.queryByTestId('add-modal-mock')).not.toBeInTheDocument();
  expect(screen.queryByTestId('info-modal-mock')).not.toBeInTheDocument();
});

// 测试delete分支
test('modalType为delete时正确渲染DeleteModal', () => {
  render(<Modal {...mockCommonProps} modalType="delete" />);
  expect(screen.getByTestId('delete-modal-mock')).toBeInTheDocument();
});

// 测试addnote分支
test('modalType为addnote时正确渲染AddModal', () => {
  render(<Modal {...mockCommonProps} modalType="addnote" />);
  expect(screen.getByTestId('add-modal-mock')).toBeInTheDocument();
});

// 测试info分支
test('modalType为info时正确渲染InfoModal', () => {
  render(<Modal {...mockCommonProps} modalType="info" />);
  expect(screen.getByTestId('info-modal-mock')).toBeInTheDocument();
});

// 测试default分支
test('modalType无匹配值时返回null', () => {
  render(<Modal {...mockCommonProps} modalType="unmatched-type" />);
  // 所有子组件都不应该被渲染
  expect(screen.queryByTestId('update-modal-mock')).not.toBeInTheDocument();
  expect(screen.queryByTestId('delete-modal-mock')).not.toBeInTheDocument();
  expect(screen.queryByTestId('add-modal-mock')).not.toBeInTheDocument();
  expect(screen.queryByTestId('info-modal-mock')).not.toBeInTheDocument();
});

进阶：验证Props透传正确性 #

如果需要确认透传给子组件的参数没有错传、漏传，可以把之前的mock子组件改造一下，把接收的props绑定到DOM的自定义属性上，方便断言：

// 改造UpdateModal的mock，把props暴露到DOM属性
jest.mock('../UpdateModal', () => (props) => (
  <div 
    data-testid="update-modal-mock"
    data-is-visible={props.isVisible}
    data-note-id={props.noteID}
    data-handle-close={props.handleClose?.name}
  />
));

// 断言示例
test('UpdateModal接收的props正确', () => {
  render(<Modal {...mockCommonProps} modalType="update" />);
  const updateNode = screen.getByTestId('update-modal-mock');
  expect(updateNode).toHaveAttribute('data-is-visible', 'true');
  expect(updateNode).toHaveAttribute('data-note-id', 'test-note-123');
});

代码优化：用参数化测试减少重复代码 #

上面的分支测试存在大量重复的render和断言逻辑，可以用Jest内置的test.each做批量生成，简化代码：

const branchTestCases = [
  { modalType: 'update', targetTestId: 'update-modal-mock' },
  { modalType: 'delete', targetTestId: 'delete-modal-mock' },
  { modalType: 'addnote', targetTestId: 'add-modal-mock' },
  { modalType: 'info', targetTestId: 'info-modal-mock' },
];

test.each(branchTestCases)(
  'modalType为$modalType时正确渲染对应组件',
  ({ modalType, targetTestId }) => {
    render(<Modal {...mockCommonProps} modalType={modalType} />);
    expect(screen.getByTestId(targetTestId)).toBeInTheDocument();
  }
);

测试注意事项 #

• 保持单元测试的隔离性：不要在Modal的测试中引入子组件的真实实现，子组件的内部逻辑属于它自身测试的覆盖范围，和壳组件的测试无关
• 不要过度断言：作为壳组件，只需要确认分支选择逻辑正确、props透传正确即可，不需要校验子组件的内部渲染细节
• 优先用queryByTestId做不存在的断言、getByTestId做存在的断言，避免依赖组件的文本内容做匹配，减少测试的脆弱性

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