I am using Apollo Client (3.3.16) MockedProvider and Jest + react testing library to test a component which using useLazyQuery with onCompleted attribute. However, MockedProvider cannot call the onCompleted function (handleData() in my case). After the console.log I found that the onCompleted function has never been triggered. Any ideas how to test component ( in my case) with useLazyQuery? Appreciated in advance! My react component code is like this:
const handleData = data => { // this function never been called for testing
setData(data.dataWithFilters.data);
};
const [loadData, { loading }] = useLazyQuery(
GET_DATA,
{
variables: {
id: productId,
first: 999999,
page: 1,
isBase: true
},
onCompleted: handleData, // never been triggered for testing
fetchPolicy: "network-only"
}
);
useEffect(() => { // works fine
loadData({
variables: {
id: productId,
first: 999999,
page: 1,
isBase: true
},
fetchPolicy: "network-only"
});
}, [loadData, productId]);
My testing code is:
const renderComponent = (mocksData) => {
render(
<MockedProvider
mocks={mocksData}
defaultOptions={{
query: { fetchPolicy: "no-cache" },
watchQuery: { fetchPolicy: 'no-cache' },
}}
addTypename={false}
>
<ServicesContextProvider freightRateServices={{}}>
<ContractInformationPageProvider>
<MemoryRouter initialEntries={["contracts/311"]}>
<Route path="products/:productId">
<ContractInformationPage />
</Route>
</MemoryRouter>
</ContractInformationPageProvider>
</ServicesContextProvider>
</MockedProvider>,
{
wrapper: BrowserRouter
}
);
};