Tengo un enlace personalizado que toma una identificación de producto y alterna con el value (boolean) y toggle como las devoluciones. Estoy tratando de escribir una prueba de unidad para ello, siguiendo el ejemplo aquí , pero recibo errores de falta de coincidencia de tipo de TypeScript (el ejemplo que estoy siguiendo no está escrito a máquina).
Gancho personalizado:
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]; }Examen en progreso:
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(); }); }); Error: donde defino el value y toggle , obtengo que Property 'value' does not exist on type '[boolean, () => void]'. y Property 'toggle' does not exist on type '[boolean, () => void]'.
¿Estoy configurando la definición de tipo de forma incorrecta o algo más va mal? Cualquier orientación sería apreciada. ¡Gracias!
Estás devolviendo una matriz. Por lo tanto, debe destruir usando [ value, toggleLike, toggleLike] y no { 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(); }); });