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

Question

我有一个自定义挂钩，它采用产品 ID 并使用 value (boolean) 和 toggle 作为 returns 进行切换。我正尝试按照示例 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]'.

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

Answer 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();

  });
});

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

Unit Testing Custom React Hooks in TypeScript using Jest and @testing-library/react-hooks

javascript

typescript

reactjs

jestjs

react-hooks