使用Jest和@testinglibrary/rect钩子在TypeScript中对自定义React钩子进行单元测试

Question

我有一个自定义挂钩，它接受一个产品id，并以value (boolean)和toggle作为返回进行切换。我正试图按照这里的例子为它编写一个单元测试，但我遇到了TypeScript类型不匹配的错误(我下面的例子不是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();
});
});