在React Testing Library中测试传入Apollo GraphQL查询的数据的形状,可以通过以下步骤进行:
import { render, waitFor } from '@testing-library/react';
import { MockedProvider } from '@apollo/client/testing';
import { gql } from '@apollo/client';
import MyComponent from './MyComponent';
const GET_DATA_QUERY = gql`
query GetData {
data {
id
name
age
}
}
`;
const mockResponse = {
data: {
data: {
id: '1',
name: 'John',
age: 30,
},
},
};
const mocks = [
{
request: {
query: GET_DATA_QUERY,
},
result: mockResponse,
},
];
render(
<MockedProvider mocks={mocks} addTypename={false}>
<MyComponent />
</MockedProvider>
);
await waitFor(() => {
const idElement = getByText('ID: 1');
const nameElement = getByText('Name: John');
const ageElement = getByText('Age: 30');
expect(idElement).toBeInTheDocument();
expect(nameElement).toBeInTheDocument();
expect(ageElement).toBeInTheDocument();
});
以上步骤中的MyComponent
是被测试的组件,根据实际情况替换为实际的组件名称。通过MockedProvider提供模拟的GraphQL响应数据,并使用waitFor等待组件加载完毕后进行断言验证数据的形状。
领取专属 10元无门槛券
手把手带您无忧上云