如何测试接收自定义Hook参数的Checkbox组件？测试状态无法变更

核心问题 #

你的代码存在两个关键问题导致测试无法修改Checkbox状态：

1. 组件onChange调用toggle时传递多余参数 #

自定义Hook的toggle函数不需要接收参数，它内部会直接基于当前状态翻转值。但你在组件中调用completeHook.toggle(!completeHook.value)，传递的参数会被忽略，虽不会直接导致状态不更新，但属于错误用法。

2. 测试代码未同步Hook状态更新到组件 #

你通过renderHook获取Hook实例后，将初始的result.current传递给组件。当Hook状态更新时，result.current会变为新的对象，但组件并未重新接收这个新的Hook实例，因此组件的checked属性始终指向初始状态的值。

修复代码 #

1. 修正CompleteCheckbox组件的onChange逻辑 #

import { Checkbox } from "@material-ui/core";
import { green } from "@mui/material/colors";

const label = { inputProps: { "aria-label": "Complete" } };

const CompleteCheckbox = ({ completeHook }) => {
    return (
        <Checkbox
            {...label}
            checked={completeHook.value}
            // 直接调用toggle即可，无需传递参数
            onChange={() => completeHook.toggle()}
            style={{
                color: green[600],
            }}
            data-testid="checkbox"
        />
    );
};

export default CompleteCheckbox;

2. 修正测试代码，确保组件同步Hook状态 #

将组件包裹在一个使用自定义Hook的父组件中，这样当Hook状态更新时，父组件会自动重新渲染并传递最新的Hook实例给CompleteCheckbox：

describe(CompleteCheckbox, () => {
    it("change to false state when clicked", async () => {
        const user = userEvent.setup();
        // 用ref保存Hook实例，方便后续验证状态
        const hookRef = {};

        render(() => {
            const hook = useComplete(true);
            hookRef.current = hook;
            return <CompleteCheckbox completeHook={hook} />;
        });

        const checkboxEl = screen.getByLabelText("Complete");
        expect(checkboxEl.checked).toBe(true);

        // 模拟点击
        await user.click(checkboxEl);

        // 验证Hook状态已更新
        expect(hookRef.current.value).toBe(false);
        // 验证Checkbox的checked状态已同步
        expect(checkboxEl.checked).toBe(false);
    });
});

补充说明 #

如果坚持使用renderHook的方式，也可以在Hook状态更新后重新渲染组件，但这种方式不够优雅：

describe(CompleteCheckbox, () => {
    it("change to false state when clicked", async () => {
        const user = userEvent.setup();
        const { result, waitFor } = renderHook(() => useComplete(true));
        
        // 初始渲染组件
        render(<CompleteCheckbox completeHook={result.current} />);
        let checkboxEl = screen.getByLabelText("Complete");
        expect(checkboxEl.checked).toBe(true);

        // 模拟点击
        await user.click(checkboxEl);

        // 等待Hook状态更新
        await waitFor(() => expect(result.current.value).toBe(false));
        
        // 重新渲染组件，传递更新后的Hook实例
        render(<CompleteCheckbox completeHook={result.current} />);
        checkboxEl = screen.getByLabelText("Complete");
        
        expect(checkboxEl.checked).toBe(false);
    });
});

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