Apollo-Graphql测试

Question

我正在使用client.query()方法从服务器查询。我想使用MockProvider为此功能编写测试。

由于client.query()的异步性质，我面临问题

// I am writing the  query as follow
const { data, loading } = await client.query({
    query: Todo,
    variables: { name },
    fetchPolicy: 'cache-first'
})
      
      

Answer 1

您可以将MockProvider与react-testing-library结合使用来测试您的反应成分。了解有关MockProvider here的更多信息。

尝试一下：

import { act, fireEvent, render } from '@testing-library/react'
import { MockedProvider } from '@apollo/react-testing'

import YourComponent from './path'

const mocks = [
	{
		request: {
			query: Todo,
			variables: {
				query: { name },
			},
		},
		result: {
			data: {
				mockData_here
			},
		},
	},
]

test('it should ...', () => {
  let rendered
  await act(async () => {
    rendered = render(
      <MockedProvider mocks={mocks} addTypename={false}>
          {YourComponent}
      </MockedProvider>
    )
  })
  expect(rendered).toMatchSnapshot()
})