The Do’s and Don’ts of Testing Apollo in React

Unit testing versus Integration testing

Before diving into some tips and tricks it is important to note that the following suggestions apply to integration style testing. Integration testing involves assessing how multiple components in your app work together rather than a single component in isolation. When you are using Apollo in your app it is important that you lean more towards integration testing since the Apollo client itself has a drastic impact on how data is received, manipulated and hence presented in your application.

Do not mock individual functions 🚫

In the example below we have a function fetchCalendar which interacts with our Apollo client to request a list of dates. This is a common pattern in Apollo where we request some data, handle errors and extract a response.

Do mock at the service worker level ✅

By mocking requests at the service worker level you enable your application to behave naturally in a testing environment. You spend less time mocking individual functions which means more test coverage for your code.

https://mswjs.io/docs/
  • We don’t have to mock any files, libraries or functions. i.e. More of our code gets tested!
  • We can test the Apollo configuration that could impact the output such as caching or type policies
  • Our tests are no longer coupled to Apollo — We could swap out our fetching library or use fetch() directly

Do not define another client for tests 🚫

As Apollo evolved it became more powerful and crucial for our front-end applications. The client itself has a range of critical features that we rely on such as caching, type policies, links, request options and even more. We end up adding core business logic and workflows into these Apollo APIs which means we must test them!

Do not hard code your mocks 🚫

Below is a common example using Apollo’s Mocked Provider API.

Do rely on the GraphQL type system ✅

Do Test Driven Development ✅

Test Driven Development (TDD) simply put is the act of writing your tests before your actual implementation. In Test Driven Development in React with Jest and Enzyme, Bulat suggests that “what TDD does is promote clean and functional code, prompting the developer to consider things like how the component will be integrated, how reusable and how refactor-able it is”.

Conclusion

As we move towards a more rich web ecosystem we need to ensure our applications will work when they depend to a great extent on external packages like Apollo and product-driven data sources like GraphQL. By incorporating the range of suggestions outlined in this article, you will be able to spend less time writing tests and can ensure that your application’s architecture and Apollo client will work together in harmony.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adam Hannigan

Adam Hannigan

Creator of Sunflower Land. Come help us build the future of Web3 gaming! https://github.com/sunflower-land/sunflower-land