Блог

У меня есть пользовательский перехват, который принимает идентификатор продукта и переключается с 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();

  });
});
 

Ошибка:
Где я определяю value и toggle , я получаю Property 'value' does not exist on type '[boolean, () => void]'. и Property 'toggle' does not exist on type '[boolean, () => void]'.

Я неправильно настраиваю определение типа или что-то еще идет не так? Любые рекомендации будут оценены. Спасибо!

Вы возвращаете массив. Для этого вы должны уничтожить using [ value, toggleLike, toggleLike] и not { 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();

  });
});