React Testing Library测试Checkbox组件初始checked状态失败如何解决

核心问题原因 #

• 组件参数接收错误：React 函数组件第一个入参是完整的 props 对象，你没有解构直接使用，实际拿到的 initialState 是 {initialState: true} 而非预期的布尔值，导致赋值逻辑失效
• input 缺少 type="checkbox" 声明：默认渲染为文本输入框，本身没有 checked 属性，role 也不匹配复选框
• 断言方式错误：checked 是 DOM 元素的动态属性（property），不是 HTML 静态特性（attribute），getAttribute 只能读取 HTML 标签上写死的属性值，JS 动态修改的 checked 不会同步到 HTML 特性上，所以永远返回 null，且返回值类型和布尔值 true 也不匹配

修复方案 #

1. 调整组件代码 #

import { useRef, useEffect } from 'react';

// 解构props获取initialState，给input指定type为checkbox
function Checkbox({ initialState }) {
  const myRef = useRef();

  useEffect(() => {
    myRef.current.checked = initialState;
  }, [initialState]);

  return <input type="checkbox" ref={myRef} />;
}

2. 调整测试用例 #

使用 React Testing Library 内置的 toBeChecked 断言，会自动读取 DOM 元素的 checked 动态属性，无需手动获取：

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

it('has a checked state matching initialState', () => {
  render(<Checkbox initialState={true} />);
  const checkbox = screen.getByRole('checkbox');
  expect(checkbox).toBeChecked();
});

// 可补充未选中场景的测试
it('has an unchecked state when initialState is false', () => {
  render(<Checkbox initialState={false} />);
  const checkbox = screen.getByRole('checkbox');
  expect(checkbox).not.toBeChecked();
});

如果你不想用内置断言，直接读取 DOM 属性也可以：expect(checkbox.checked).toBe(true)

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