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

I have a custom hook that takes a product id and toggles between liked/unliked with value (boolean) and toggleLike as the returns. I'm trying to write a unit test for it, following the example here, but I'm getting TypeScript type-mismatch errors (the example I'm following isn't typescripted).

Custom Hook:

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

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

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

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

  return [value, toggleLike];
}

Test in progress:

import { renderHook } from "@testing-library/react-hooks";
import useLikes from '../../helpers/useLikes';

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

  });
});

Error: Where I'm defining value and toggleLike, I'm getting Property 'value' does not exist on type '[boolean, () => void]'. and Property 'toggleLike' does not exist on type '[boolean, () => void]'.

Am I setting up the type definition incorrectly or is something else going wrong? Any guidance would be appreciated. Thanks!

CodePudding user response：

You are returning an array. Therefor you have to destruct using [ value, toggleLike, toggleLike] and 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();

  });
});