如果使用Apollo MockedProvider时没有返回预期的数据,可能有以下几种解决方法:
// 组件中的查询
const { loading, error, data } = useQuery(GET_USERS, {
variables: { id: 1 },
});
// MockedProvider中的查询
const mocks = [
{
request: {
query: GET_USERS,
variables: { id: 1 },
},
result: {
data: {
users: [{ id: 1, name: 'John' }],
},
},
},
];
// 测试代码
import { render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/client/testing';
import { MyComponent } from './MyComponent';
it('should render with mocked data', async () => {
const mocks = [
{
request: {
query: GET_USERS,
variables: { id: 1 },
},
result: {
data: {
users: [{ id: 1, name: 'John' }],
},
},
},
];
render(
);
// 断言代码
});
// 测试代码
import { render, screen, waitFor } from '@testing-library/react';
import { MockedProvider } from '@apollo/client/testing';
import { MyComponent } from './MyComponent';
it('should render with mocked data', async () => {
const mocks = [
{
request: {
query: GET_USERS,
variables: { id: 1 },
},
result: {
data: {
users: [{ id: 1, name: 'John' }],
},
},
},
];
render(
);
await waitFor(() => {
expect(screen.getByText('John')).toBeInTheDocument();
});
});
通过检查查询/变异的名称和参数,确保正确地包装被测试组件,并使用waitFor函数等待数据加载完成,你应该能够解决Apollo MockedProvider没有返回预期数据的问题。