TypeScript下用Jest测试React自定义useToggle钩子出现类型不匹配问题

问题原因 #

1. 解构语法和返回值结构不匹配：你的useToggle返回的是[boolean, () => void]类型的元组（数组结构），但测试代码中使用了对象解构语法const { value, toggle }去读取数组的属性，数组本身不存在value、toggle这两个命名属性，所以触发了类型错误。
2. 断言变量错误：测试代码中写的expect(setValue).toBeDefined()不符合逻辑，setValue是钩子内部的局部变量，没有对外暴露，你实际需要断言的是返回的toggle函数存在。

修复后的测试代码 #

describe('useToggle', () => {
  it('returns value and toggle', () => {
    const { result } = renderHook(() => useToggle(1));
    // 改用数组解构，和钩子返回值结构对应
    const [value, toggle] = result.current;

    expect(value).toBe(false);
    expect(toggle).toBeDefined();
  });
});

扩展测试用例（可选，验证完整逻辑） #

如果要验证toggle功能的执行效果，可以补充以下测试，注意状态更新操作需要用act包裹：

it('toggles status and updates localStorage correctly', () => {
  const { result } = renderHook(() => useToggle(1));
  const [, toggle] = result.current;

  act(() => {
    toggle();
  });

  // 验证状态更新
  expect(result.current[0]).toBe(true);
  // 验证localStorage写入符合预期
  const storedData = JSON.parse(localStorage.getItem(ITEMS) || '{}');
  expect(storedData[1]).toBe(true);
});

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