Как сбросить или очистить макеты useQuery для ApolloProvider перед каждым тестом?

У меня в одном описании две тестовые функции. Оба они используют компонент с mocks apollo, поскольку этот компонент использует useQuery. Но ответ от моков на каждый тест должен быть разным. Теперь я не могу сбросить или очистить макеты, которые я распространяю на ApolloProvider. У кого-нибудь была такая проблема? Как вы ее решили?

import React from 'react'
import { render, createMocks, screen, cleanup } from 'test-utils'

import GET_DEVICES from 'src/screens/dashboard/queries/GET_DEVICES'
import Section from './Section'

describe('DashboardScreen', () => {
    const result = {
        data: {
           numDevices: 1
         }
    }
    
    const mocks = createMocks([{
        query: GET_DEVICES,
        result: result,
    }])

    afterEach(() => {
        jest.clearAllMocks() <------ THIS IS NOT SOLVING THE ISSUE
    })

    it('should load Section with expected badges', async () => {
        render(<Section />, { mocks })
   
        const badge0 = screen.getByTestId('Badge-0')
        expect(badge0).toBeInTheDocument()
        const badge1 = screen.getByTestId('Badge-1')
        expect(badge1).toBeInTheDocument()
    })

    it('should display the exclamation icon and 7 devices require attention', async () => {
        const result_local = {
          data: {
              numDevices: 4,
          }
        }

        const mocks_local = createMocks([
            {
              query: GET_DEVICES,
              result: result_local,
             }
        ])
       
        render(<Section } />, { mocks: mocks_local })

        const devicesWithActiveIssuesIcon = await screen.findByTestId('ExclamationIcon')
        expect(devicesWithActiveIssuesIcon).toBeInTheDocument()
     })
 })

CreateMocks - это импорт и выглядит так:

const createMocks = mocks =>
mocks.reduce(
  (requests, mock) => [
    ...requests,
    {
      request: {
        query: mock.query,
        variables: mock.variables
      },
      result: mock.result
    }
  ],
  []
)

Он вернет объект следующим образом:

const mocks = [
  {
    request: {
      query: GET_DEVICES,
      variables: {}
    },
    result: {
      data: {
      numDevices: 1
      },
    },
  },
]

person 6axter82    schedule 21.01.2021    source источник


Ответы (1)


проблема может быть в том, что провайдеры ApolloProvider, используемые для визуализации этих двух компонентов, используют один и тот же экземпляр InMemoryCache. подробности см. по следующей ссылке.

https://github.com/benawad/apollo-mocked-provider/issues/1#issuecomment-511593398

в этом случае вам просто нужно создавать новый экземпляр InMemoryCache для каждого теста.

person Hongxiang Liu    schedule 21.04.2021