Tengo un componente que estoy tratando de probar, pero parece que el caché de Apollo no se borra entre pruebas. Estoy usando React Testing Library y Jest.
Aquí hay un par de mis pruebas que prueban situaciones opuestas:
it('shows a "show more" button when there is `hasNextPage` is true', async () => { render( <MemoryRouter initialEntries={['/media/1']}> <MockedProvider mocks={[getCharacterMock, getMediaMock]} cache={cache}> <Route path='/media/:id'> <Media /> </Route> </MockedProvider> </MemoryRouter> ); await waitForElementToBeRemoved(() => screen.getByText(/loading/i)); userEvent.click(screen.getByRole('button', { name: /characters/i })); await waitForElementToBeRemoved(() => screen.getByText(/loading/i)); expect(screen.getByRole('button', { name: /show more/i })).toBeInTheDocument(); }); it("doesn't show a 'show more' button when `hasNextPage` is false", async () => { render( <MemoryRouter initialEntries={['/media/1']}> <MockedProvider mocks={[getCharacterMockNextPageFalse, getMediaMock]} cache={cache}> <Route path='/media/:id'> <Media /> </Route> </MockedProvider> </MemoryRouter> ); await waitForElementToBeRemoved(() => screen.getByText(/loading/i)); userEvent.click(screen.getByRole('button', { name: /characters/i })); await waitForElementToBeRemoved(() => screen.getByText(/loading/i)); expect(screen.queryByText(/show more/i)).toBeNull(); }); La primera prueba pasa, pero la segunda prueba falla porque 'cargando' no está en la pantalla en absoluto. El DOM que se registra en la consola muestra que el componente ya se ha renderizado con los datos que se suponía que debía obtener del simulacro getMediaMock . Si comento las líneas to waitForElementToBeRemoved , la prueba falla porque "Mostrar más" en realidad se representa, aunque el simulacro getCharacterMockNextPageFalse establece hasNextPage en false (lo que significaría que el botón "Mostrar más" no se debe representar). La única razón por la que puedo pensar que esto suceda es porque la prueba está usando los datos simulados de la prueba anterior donde hasNextPage se estableció en true .
¿Hay alguna manera de borrar el caché entre pruebas? ¿O hay algo más que causa este comportamiento?
Entonces, por lo que puedo decir, si las pruebas usan el mismo caché de Apollo, entonces se usará exactamente el mismo caché para cada prueba (es decir, no se borrará entre pruebas). La forma en que lo arreglé en este caso fue simplemente eliminar el caché del MockedProvider de la segunda prueba (porque realmente no lo necesitaba en esta prueba), pero también habría funcionado crear un nuevo inMemoryCache con la misma configuración para esa prueba.
La segunda prueba ahora se ve así:
it("doesn't show a 'show more' button when `hasNextPage` is false", async () => { render( <MemoryRouter initialEntries={['/media/1']}> <MockedProvider mocks={[getCharacterMockNextPageFalse, getMediaMock]}> <Route path='/media/:id'> <Media /> </Route> </MockedProvider> </MemoryRouter> ); await waitForElementToBeRemoved(() => screen.getByText(/loading/i)); userEvent.click(screen.getByRole('button', { name: /characters/i })); await waitForElementToBeRemoved(() => screen.getByText(/loading/i)); expect(screen.queryByText(/show more/i)).toBeNull(); });