Company
Date Published
Author
Jake Dawkins
Word count
1488
Language
English
Hacker News points
None

Summary

The testing of Apollo's Query Component is crucial for ensuring that the code is secure, reliable, and functions as expected. The component relies on context to pass the ApolloClient instance through the React component tree, and makes network requests to fetch data, which affects how tests should be written. To test this code, the `MockedProvider` component from the `react-apollo/test-utils` module is used to mock calls to the GraphQL endpoint, allowing tests to be run in isolation and providing consistent results on every run. The provider can specify the exact results that should be returned for a certain query using the `mocks` prop. Testing loading states, final state, and error states are also important aspects of testing this component. The `MockedProvider` allows for these tests to be written by returning a Promise that will resolve to the data, enabling testing of the loading state in addition to the final state. For more complex UI with heavy calculations or delays added into its render logic, increasing the wait time or using a package like `wait-for-expect` may be necessary. Testing error states is also crucial to prevent accidental regressions.