withApollo: cannot read property 'apollo' of undefined

[talentlessguy]

I try to run a test for an Index page wrapped in withApollo but it produces an empty snapshot.

Repository | Snapshot | Page source code

index.test.tsx

import React from 'react'
import renderer from 'react-test-renderer'
import User from '../pages/user'
import Index from '../pages/index'

it('Random pages renders correctly', () => {
  const tree = renderer.create(<User id="Ivan" />).toJSON()
  expect(tree).toMatchSnapshot()
}) // this test is ok

it('Renders index page with apollo HOC', () => {
  const tree = renderer.create(<Index />).toJSON()
  expect(tree).toMatchSnapshot()
}) // this throws an error

Error stack

$ jest --update-snapshot
 FAIL  __tests__/index.test.tsx (23.757s)  
  ✓ Random pages renders correctly (87ms)  
  ✕ Renders index page with apollo HOC (66ms)

  ● Renders index page with apollo HOC     

    TypeError: Cannot read property 'apollo' of undefined

      10 | 
      11 | it('Renders index page with apollo HOC', () => {
    > 12 |   const tree = renderer.create(<Index />).toJSON()
         |                         ^       
      13 |   expect(tree).toMatchSnapshot()      14 | })
      15 | 

      at new WithData (node_modules/next-apollo/dist/withData.js:147:87)
      at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3459:18)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6785:5)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7742:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11413:12)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11445:24)
      at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11528:7)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12416:7)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12328:7)
      at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12302:3)
      at requestWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12171:5)
      at scheduleWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11986:5)
      at scheduleRootUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12585:3)
      at updateContainerAtExpirationTime (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12613:10)      
      at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12624:10)
      at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13057:5)
      at Object.create (__tests__/index.test.tsx:12:25)

  console.error node_modules/prop-types/checkPropTypes.js:20
    Warning: Failed prop type: The prop `serverState` is marked as required in `WithData(Index)`, but its value is `undefined`.  
        in WithData(Index) (at __tests__/index.test.tsx:12)

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9215
    The above error occurred in the <WithData(Index)> component:
        in WithData(Index) (at __tests__/index.test.tsx:12)
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries

How to properly run tests for this HOC? Please describe.

[talentlessguy]

@adamsofferis there any idea on how to fix it?

[adamsoffer]

hmm I'm not sure. Give the next-with-apollo package a try and see if you get the same error.

[talentlessguy]

next-with-apollo doesn't support @apollo/react-hooks so it doesn't work neither but by another reason.