我已经试着解决这个问题几天了,但我仍然不知所措。
我有一个使用Apollo Client的React应用程序,我想用React测试库测试一个组件。忽略所有不相关的细节,我的主文件代码如下所示:
const ComponentToTest = () => {
...
const { data, loading } = useComponentRespQuery({
variables: {
id: idValue
},
skip: !idValue
});
if (loading) {
return <>Loading</>;
}
...
}
测试是这样写的:
const componentRender = (mockGraphQLData: any, initialEntry: string = "") => render(
<MemoryRouter initialEntries={[initialEntry]}>
<MockedProvider mocks={[ mockGraphQLData ]} addTypename={false}>
<ComponentToTest />
</MockedProvider>
</MemoryRouter>
);
describe("ComponenToTest", () => {
it("should render a component to test", async() => {
componentRender(zoneMock);
const placeHolderValues = await screen.findByText(/Bla/i);
expect(placeHolderValues).toBeInTheDocument();
});
...
}
其中componentRespDocument等于
query GetResp($id: ID!) {
resp(id: $id) {
id
name
description
controls {
id
name
}
}
我的笑话是这样写的
export const componentRespMock = {
request: {
query: componentRespDocument
},
result: {
data: {
resp: {
id: "ID",
name: "NAME",
description: "DESCRIPTION",
controls: [
{
id: "CTRL_2",
name: "Second control"
}
]
}
}
}
};
我可以自信地说,这种测试方法以前在我的代码库中工作过。我发现了一种方法,可以让Apollo在测试时返回正确的值,那就是注解掉useComponentRespQuery
中的所有代码。有人以前遇到过这种情况,并且知道如何修复它吗?
1条答案
按热度按时间ccrfmcuu1#
如果不知道
MockedProvider
provider的内部是什么,这就很难说了。但是,根据我的经验,它们应该总是匹配(1:1),特别是当你在useComponentRespQuery
中注解掉{ variables: { id: idValue }, skip: !idValue }
时。我建议仔细检查
zoneMock
,以确保它与您期望的匹配