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

Question

我有一个自定义钩子，它接受一个产品 id 并与value (boolean)和toggle作为回报进行切换。我正在尝试按照此处的示例为它编写一个单元测试，但是我遇到了 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();

  });
});

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

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

标签： javascriptreactjstypescriptreact-hooksjestjs

Answer 1

您正在返回一个数组。因此，您必须破坏 using[ 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();

  });
});