graphql - 尝试使用 useQuery 钩子测试组件但 onCompleted 导致问题
问题描述
我正在尝试测试以下组件,但由于查询的 onCompleted 道具上的错误,一旦获取数据,就无法让它在 Jest 中呈现。我有另一个基本相同的组件,但根本不使用 onCompleted 并且不会给 Jest 带来麻烦。
这是有问题的组件,为简洁起见,减少了一些代码:
import { trackProductListView } from "src/shared/components/analytics";
import searchResourcesQuery from "./search-resources.graphql";
const SearchResources = ({ filter, orderBy, query }) => {
const { loading, error, data, fetchMore } = useQuery(searchResourcesQuery, {
variables: {
orderBy,
filter,
query
},
onCompleted: ({ searchResources: { results } }) =>
results && trackProductListView("Search", null, results, 1)
});
...
return (
<div>
{!results.length ? (
<EmptySearch variant="resources" />
) : (
<InfiniteResources
trackContext="Search"
hasMore={!!searchAfter}
loadMoreEntries={loadMoreEntries}
resources={results}
/>
)}
</div>
);
};
这是测试,虽然我已经删除了模拟结果(再次,为简洁起见):
import React from "react";
import { act, wait } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { MockedProvider } from "@apollo/react-testing";
import renderWithRouter from "src/shared/test-utils/renderWithRouter.js";
import SearchResources from "./search-resources";
import searchResourcesQuery from "./search-resources.graphql";
const mocks = [
{
request: {
query: searchResourcesQuery,
variables: { query: "test" }
},
result: {
data: {
searchResources: {
searchAfter: null,
results: [],
__typename: "ResourceList"
}
}
}
}
];
it("renders", async () => {
const { getByText } = renderWithRouter(
<MockedProvider addTypename={false} mocks={mocks}>
<SearchResources query="test" />
</MockedProvider>
);
await act(() => wait(() => getByText("Resource Partner Link test")));
expect(getByText("Resource Partner Link test")).toBeInTheDocument();
});
运行这些测试会导致:
TypeError: (0 , _analytics.trackProductListView) is not a function
任何解决此问题的帮助都非常感谢!
解决方案
好吧,原来我可以模拟 trackProductListView 函数
推荐阅读
- java - 模拟 @AuthenticationPrincipal 参数
- c# - 在对象初始化中填充嵌套属性 - C#
- unity3d - Unity + Admob 奖励广告:事件未触发
- c# - 从员工类创建组织结构
- azure - Azure AD B2C 和 ADFS 作为 SAML IdP。代码示例?
- angular - 重复定时动作的正确设计
- multi-tenant - 从大众运输开始
- macos - Docker for Mac 不转发端口
- postgresql - SQL 是否完全执行子查询?
- powershell - 在 PowerShell 中将 Import-CSV 用于变量时,未返回任何信息