如何测试使用 useQuery 的组件的示例

Question

我有一个使用 Apollo hooks lib 的 useQuery hook 的 React 组件。我在测试此组件时遇到问题。这是我目前的设置。

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import DashboardBar from './DashboardBar';
import { render, cleanup } from '@testing-library/react';
import { QUERY } from '../../queries';
import { ApolloClient } from 'apollo-client';
import { ApolloProvider as ApolloHooksProvider } from '@apollo/react-hooks';
import { MockedProvider } from 'react-apollo/test-utils';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { MockLink } from 'apollo-link-mock';
import wait from 'waait';
import casual from 'casual';
describe('<DashboardBar />', () => {
  it('renders and matches snapshot', async () => {
    const mocks = [
      {
        request: { query: QUERY, variables: { id: 'WLYhM' } },
        result: {
          data: {
            q: {
              brand: fakeBrand,
              claimByAction: casual.boolean,
              claimRules: fakeClaimRules,
              wantIn: fakeWantIn,
            },
          },
        },
      },
    ];
    function createClient(mocks) {
      return new ApolloClient({
        cache: new InMemoryCache(),
        link: new MockLink(mocks),
      });
    }
    const client = createClient(mocks);
    const { container } = render(
      <ApolloHooksProvider client={client}>
        <Router>
          <DashboardBar {...props} store={reduxStore.store} />
        </Router>
      </ApolloHooksProvider>
    );
    console.log(container.firstChild);
    expect(container.firstChild).toBe(null);
    await wait(200);
    console.log(container.firstChild);
  });
});

运行测试时，出现以下错误

TypeError: Cannot read property 'q' of undefined

即使数据在实际组件中返回正常。

有没有人有一个例子说明如何使用 Apollo 钩子库中的钩子成功设置和执行带有组件的测试？

谢谢！

Answer 1

实际上我设法使用act()

示例如下：

import { MockedProvider } from '@apollo/react-testing'
import query from 'data/graphql/Device/psaButton.graphql'
import React from 'react'
import { act, create, ReactTestRenderer } from 'react-test-renderer'
import { MockAppNoLayout } from 'testHelpers/testHelpers'
import waitForExpect from 'wait-for-expect'
import PSAButton from './PSAButton'
const mocks = [
  {
    request: {
      query,
      variables: {
        deviceId: '1',
      },
    },
    result: {
      data: {
        deviceById: {
          id: '1',
          info: {
            psaUrl: 'asdsadsad',
            lastSyncDate: 'asdasd',
            lastVerifyDate: 'asdsad',
          },
        },
        user: {
          timeZone: 'Europe/London',
        },
      },
    },
  },
]
describe('PSAButton', () => {
  it('renders correctly', async () => {
    let wrapper: ReactTestRenderer
    act(() => {
      wrapper = create(
        <MockAppNoLayout>
          <MockedProvider mocks={mocks} addTypename={false}>
            <PSAButton deviceId="1" />
          </MockedProvider>
        </MockAppNoLayout>,
      )
    })
    await waitForExpect(() => {
      const testInstance = wrapper.root
      expect(testInstance.findByType('span').children[0]).toBe('Open In PSA')
    })
  })
})

MockAppNoLayout是一个 React 组件树，其中包含 amock IntlProvider 和 Styleprovider 等(对于这个问题并不重要(。