Menu
I'm trying to test a component that uses graphql, but when using Apollo's MockProvider I never get the data, it just says loading = true every time.
A complete, minimalist example is here
Things I've tried:
export function Component), but that doesn't work when testing nested components
815
Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.
Apollo is suitable for managing remote data, and 20% of it was managed in a separate Redux Store, hence there is a need to integrate GraphQL and Redux. Apollo GraphQL no longer requires Redux. Apollo Client automatically catches the data and normalizes new data in query responses and after mutation.
gql. The gql template literal tag can be used to concisely write a GraphQL query that is parsed into a standard GraphQL AST. It is the recommended method for passing queries to Apollo Client. While it is primarily built for Apollo Client, it generates a generic GraphQL AST which can be used by any GraphQL client.
Apply the useQuery hookWe'll use Apollo Client's useQuery React Hook to execute our new query within the Launches component. The hook's result object provides properties that help us populate and render our component throughout the query's execution.
Yup I ran into this issue as well. The funny thing was that if I add console logs to the component itself, I could see that the data ended up getting there just fine. But for some reason the wrapper would still only contain our "Loading ..." UI.
Turns out you need to call wrapper.update() to get the wrapper to rerender it's contents.
This is what worked for me, but it seems less than ideal, so if anyone else has a workaround let me know! Right now our tests look something like:
it('should render the HeroDiv if there is guide data', async () => {
const wrapper = mount(
<MockedProvider mocks={mocksWithGuideData} addTypename={false}>
<Hero {...props} />
</MockedProvider>
);
await wait(0);
wrapper.update();
expect(wrapper.find('HeroDiv').exists()).toBeTruthy();
})If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
