使用 Jest 和 @testing-library/react-hooks 在 TypeScript 中对自定义 React Hooks 进行单元测试答案

【问题标题】：Unit Testing Custom React Hooks in TypeScript using Jest and @testing-library/react-hooks使用 Jest 和 @testing-library/react-hooks 在 TypeScript 中对自定义 React Hooks 进行单元测试
【发布时间】：2021-12-27 21:20:20
【问题描述】：

我有一个自定义钩子，它接受一个产品 ID 并以 value (boolean) 和 toggle 作为返回值进行切换。我正在尝试为它编写一个单元测试，遵循示例 here，但我收到 TypeScript 类型不匹配错误（我遵循的示例不是打字稿）。

自定义挂钩：

export default function useToggle(id: number): [boolean, () => void] {
  const [value, setValue] = React.useState(false);

  useEffect(() => {
    try {
      const data = localStorage.getItem(ITEMS);
      const all = data ? JSON.parse(data) : {};
      setValue(!!all[id]);
    } catch (error) {
      console.error('items localStorage get error', error);
      setValue(false);
      localStorage.removeItem(ITEMS);
    }
  }, [id]);

  function toggle() {
    try {
      const data = localStorage.getItem(ITEMS);
      const all = data ? JSON?.parse(data) : {};
      all[id] = !all[id];
      localStorage.setItem(ITEMS, JSON.stringify(all));

      setValue(v => !v);
    } catch (error) {
      console.error('items localStorage set error', error);
    }
  }

  return [value, toggle];
}

测试进行中：


describe('useToggle', () => {
  it('returns value and toggle', () => {
    const { result } = renderHook(() => useToggle(1));
    const { value, toggle }: [boolean, () => void] = result.current;

    expect(value).toBe(false);
    expect(setValue).toBeDefined();

  });
});

错误： 在我定义value 和toggle 的地方，我得到Property 'value' does not exist on type '[boolean, () => void]'. 和Property 'toggle' does not exist on type '[boolean, () => void]'.

是我错误地设置了类型定义还是有其他问题？任何指导将不胜感激。谢谢！

【问题讨论】：

标签： javascript reactjs typescript react-hooks jestjs

【解决方案1】：

您正在返回一个数组。因此，您必须使用[ value, toggleLike, toggleLike] 而不是{ value, toggleLike} 进行破坏。


describe('useLikes', () => {
  it('returns value and toggleLike', () => {
    const { result } = renderHook(() => useLikes(1));
    const [ value, toggleLike ]: [boolean, () => void] = result.current;

    expect(value).toBe(false);
    expect(setValue).toBeDefined();

  });
});

【讨论】：