For the past few months, I've been immersed in working with ApolloJS within React (using react-apollo) and have encountered various tricks and challenges when it comes to unit testing components wrapped with Apollo.
When testing a component directly wrapped with Apollo, I make sure to export and test the component before applying the HoC returned by graphql. In cases where a component has an Apollo-wrapped descendant, I rely on Enzyme's shallow rendering to prevent the descendant from mounting whenever possible. If full-DOM rendering using mount is necessary, I utilize a MockedProvider from Apollo's testing utilities to avoid errors related to accessing this.context within descendants.
However, one scenario continues to pose a challenge: testing a component with Apollo-wrapped descendants using full-DOM rendering while still needing to make assertions regarding the component instance itself (such as state or instance methods). The use of a mocked provider for avoiding issues with descendants results in assertions on the wrapper being performed on the MockedProvider instance rather than the intended component being tested.
Here’s an example:
import { mount } from 'enzyme'
import { MockedProvider } from 'react-apollo/lib/test-utils'
// This component contains descendants that are Apollo-wrapped and require access to `this.context` from an Apollo provider
import Assignments from 'app/components/assignments
...
describe('<Assignments />', function() {
it('sets sorted assignments in initial state', function() {
const assignments = [...]
const wrapper = mount(
<MockedProvider>
<Assignments assignments={assignments} />
</MockedProvider>
)
// Test fails due to wrapper referencing the MockedProvider instance instead of the Assignments instance
expect(wrapper.state('assignments')).to.eql([...])
})
})
I've explored potential solutions through Enzyme to access the child component instance instead of the root, but it seems unsupported. Additionally, I’ve been searching for alternatives to utilizing the MockedProvider in these scenarios without success.
If anyone has devised a workaround for this issue or recommends a different approach when dealing with nested Apollo-wrapped components, your insights would be greatly appreciated.