es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El cliente de Apollo no está llamando con las variables correctas.

Tengo una consulta como:

export default gql`
    query getStatus($statusInput: StatusInput!) {
        getStatus(statusInput: $statusInput) {
            canAccess
            isCorrect
        }
    }
`;

Y luego tengo un hook que utiliza esta consulta:

const useStatus = () => {
    const [someId] = useId();
    return useQuery<{ getStatus: StatusResponse }>(getStatus, {
        variables: { statusInput: { id: someId, numValue: 1 } },
        fetchPolicy: 'no-cache',
        skip: !cartId,
        ssr: false,
    });
};

Y lo estoy usando en mi componente como:

const { data: statusData, loading: dataLoading, variables } = useStatus();

En el component.spec.tsx tengo

const mocks = [
    {
        request: {
            query: getStatus,
            variables: {
                statusInput: {
                    id: '1234',
                    numValue: 55,
                },
            },
        },
        result: {
            data: {
                getStatus: {
                    __type: 'StatusResponse',
                    canAccess: true,
                    isCorrect: true
                },
            }
        },
    },
];

y dentro del test tengo

    const { queryByTestId, container } = renderWithProviders(
        <MockedProvider mocks={mocks} addTypename={true} cache={inMemoryCache}>
            <Component />
        </MockedProvider>,
        { mockedContextData: someContextMocks }
    );

Pero cuando imprimo variables en el componente, obtengo

{ checkoutStatusInput: { id: '', numValue: 1 } }

en lugar de los valores que pasé en los mocks.

¿Me faltó algo?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Parece que podrías haber olvidado pasar el gancho useStatus a tu componente en la prueba.

    Intenta reemplazar <component></component> con <component usestatus="{useStatus}"></component> en tu función renderWithProviders.

    Esto asegura que los datos simulados sean utilizados por el gancho useStatus en tu componente, en lugar de la implementación real.

    Además, asegúrate de que useStatus sea una exportación nombrada del módulo donde se define, para que pueda ser fácilmente importado en tu archivo de prueba.

Comments are closed.