我有一個自定義鉤子，它接受一個產品 id 并在喜歡/不喜歡value (boolean)和toggleLike作為回報之間切換。我正在嘗試按照此處的示例為它撰寫單元測驗，但是我遇到了 TypeScript 型別不匹配錯誤（我遵循的示例沒有打字稿）。
自定義掛鉤：
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];
}
正在進行測驗：
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();
});
});
錯誤：
我在哪里定義value和toggleLike，我得到Property 'value' does not exist on type '[boolean, () => void]'.和Property 'toggleLike' does not exist on type '[boolean, () => void]'.
我是否錯誤地設定了型別定義還是其他地方出了問題？任何指導將不勝感激。謝謝！
uj5u.com熱心網友回復：
您正在回傳一個陣列。因此，您必須使用[ 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();
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/357859.html
標籤：javascript 反应 打字稿 反应钩子 玩笑
下一篇：即使在Cypress中嘗試將pdf檔案作為多部分FormDataPOST請求發送時，FormData物件也是空的