TIL: The importance of importing a module explicitly with React Apollo

While trying to write some tests for a React component that makes use of Apollo, I was getting increasingly frustrated when I couldn’t actually access the component. I had a big lightbulb moment when this Stack Overflow told me to simply use the exported component instead of the default export. I was testing the component as a whole and Apollo was adding some extra functionality on top that made testing a challenge, and in order to actually unit test my component, I don’t need the Apollo garnish.

Here’s what I had:

// UsersImport.js

export class UsersImport extends Component { 
  ...
}

export default compose(

  ...
)(withApollo(UsersImport))

// UsersImport.spec.js

import UsersImport from './UsersImport'

Here’s what I actually needed to do:

// UsersImport.spec.js

import { UsersImport } from './UsersImport'

That way, I have access to the first export (UsersImport) and not the entire module that includes Apollo.