Creé este gancho:
import { useQuery, gql } from '@apollo/client'; export const GET_DECIDER = gql` query GetDecider($name: [String]!) { deciders(names: $name) { decision name value } } `; export const useDecider = (name) => { const { loading, data } = useQuery(GET_DECIDER, { variables: { name } }); console.log('loading:', loading); console.log('data:', data); return { enabled: data?.deciders[0]?.decision, loading }; };Estoy tratando de probarlo con la biblioteca de pruebas de reacción:
const getMock = (decision) => [ { request: { query: GET_DECIDER, variables: { name: 'FAKE_DECIDER' }, }, result: { data: { deciders: [{ decision }], }, }, }, ]; const FakeComponent = () => { const { enabled, loading } = useDecider('FAKE_DECIDER'); if (loading) return <div>loading</div>; console.log('DEBUG-enabled:', enabled); return <div>{enabled ? 'isEnabled' : 'isDisabled'}</div>; }; // Test import React from 'react'; import { render, screen, cleanup, act } from '@testing-library/react'; import '@testing-library/jest-dom'; import { MockedProvider } from '@apollo/client/testing'; import { useDecider, GET_DECIDER } from './useDecider'; describe('useDecider', () => { afterEach(() => { cleanup(); }); it('when no decider provided - should return false', async () => { render(<MockedProvider mocks={getMock(false)}> <FakeComponent /> </MockedProvider> ); expect(screen.getByText('loading')).toBeTruthy(); act((ms) => new Promise((done) => setTimeout(done, ms))) const result = screen.findByText('isDisabled'); expect(result).toBeInTheDocument(); }); });Sigo recibiendo este error:
Tiempo de espera: la devolución de llamada asíncrona no se invocó dentro del tiempo de espera de 5000 ms especificado por jest.setTimeout.Timeout: la devolución de llamada asíncrona no se invocó dentro del tiempo de espera de 5000 ms especificado por jest.setTimeout.Error: