使用React Testing Library编写CheckBox组件选中状态检测测试用例

你的CheckBox组件选中状态有两个明确的标识：

• 选中时data-testid="CHECKBOX_ID"的元素会新增active类名，未选中时为inactive类
• 选中时才会渲染类名为check-mark的子元素

基于React Testing Library的测试用例写法如下：
首先确保你已安装@testing-library/react和@testing-library/jest-dom依赖，后者用于提供toHaveClass、toBeInTheDocument等便捷断言方法。

编写测试文件（示例命名为CheckBox.test.jsx）：

import { render, screen, fireEvent } from '@testing-library/react';
import CheckBox from './你的CheckBox组件实际路径';

// 测试未选中状态
test('CheckBox未激活时处于未选中状态', () => {
  render(<CheckBox active={false} label="测试复选框" />);
  const checkboxBox = screen.getByTestId('CHECKBOX_ID');
  // 两种断言方式二选一即可，也可同时写增强可靠性
  expect(checkboxBox).toHaveClass('inactive');
  expect(checkboxBox).not.toHaveClass('active');
  expect(screen.queryByClassName('check-mark')).not.toBeInTheDocument();
});

// 测试选中状态
test('CheckBox激活时处于选中状态', () => {
  render(<CheckBox active={true} label="测试复选框" />);
  const checkboxBox = screen.getByTestId('CHECKBOX_ID');
  expect(checkboxBox).toHaveClass('active');
  expect(checkboxBox).not.toHaveClass('inactive');
  expect(screen.getByClassName('check-mark')).toBeInTheDocument();
});

// 可选：测试点击切换选中逻辑
test('点击CheckBox会触发onClick回调并返回最新状态', () => {
  const mockOnClick = jest.fn();
  render(<CheckBox active={false} label="测试复选框" onClick={mockOnClick} />);
  const checkboxBox = screen.getByTestId('CHECKBOX_ID');
  fireEvent.click(checkboxBox);
  // 验证点击后回调拿到的状态为true
  expect(mockOnClick).toHaveBeenCalledWith(true);
});

补充说明 #

• 用getByTestId定位box元素是最稳定的方式，不会因为类名、文案变动导致定位失效
• 如果你只需要判断选中状态，直接断言check-mark元素是否存在、或者box是否有active类即可，两种方式都可以覆盖判断逻辑
• 如果你的测试环境没有配置jest-dom的类名断言，可以改用expect(checkboxBox.className.includes('active')).toBe(true)的原生写法

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