Uso un enlace personalizado para compartir una función de increment en mi aplicación (incrementa las cantidades en un carrito de compras).

Lo que hace esa función:

• obtiene un objeto de datos de un caché de React Query
• incrementa la propiedad de quantity de datos
• realiza una llamada API a través de React Query useMutation y luego, si tiene éxito, actualiza el caché de React Query

Después de eso, los componentes leen el caché del carrito de React Query y actualizan la interfaz de usuario con la nueva cantidad.

El gancho hace el trabajo y finalmente el caché se actualiza como se esperaba.

Ahora, trato de probar el enlace en un componente para verificar que la interfaz de usuario se actualice en consecuencia.

La llamada a la API se simula usando msw . Su valor devuelto se usa para actualizar el caché:

 rest.put(`${api}/carts/1`, (req, res, ctx) => { return res(ctx.json({ data: [{ id: 1, quantity: 2 }] })); })

También me burlé de las funciones react-query queryClient.setQueryData y getQueryData para poder probar sus valores de retorno.

 jest.mock("react-query", () => ({ ...jest.requireActual("react-query"), useQueryClient: () => ({ setQueryData: jest.fn(), getQueryData: jest .fn() .mockReturnValueOnce({ data: [{ id: 1, quantity: 1 }] }) .mockReturnValueOnce({ data: [{ id: 1, quantity: 2 }] }), }), }));

Finalmente, pruebo la interfaz de usuario que debería actualizarse con la nueva cantidad, pero getQueryData siempre devuelve la quantity: 1 , incluso con llamadas múltiples.

Ahora no estoy seguro de tener el enfoque correcto para esa prueba.