Search code examples
reactjsdeck.glreact-map-gl

Testing react-map-gl/deck.gl component with Jest/Enzyme causes 'TypeError: Cannot read property 'state' of null'

I am trying to create a simple 'renders without crashing' test for my React components that contains a ReactMapGL components, which itself contains a DeckGL component.

This is the test I have written:

describe('MapGL test', () => {
  it('renders without crashing', () => {
    const wrapper = mount(
      <MapGL
        gpsPath={mockGpsPath}
        pathColor={mockPathColor}
        pathWidth={mockPathWidth}
        bearing={mockBearing}
      />,
    )
  })
})

and I have also tried this:

describe('MapGL test', () => {
  it('renders without crashing', () => {
    const div = document.createElement('div')
    ReactDOM.render(
      <div>
        <MapGL
          gpsPath={mockGpsPath}
          pathColor={mockPathColor}
          pathWidth={mockPathWidth}
          bearing={mockBearing}
        />
      </div>,
      div,
    )
  })
})

Both tests cause the following error:

    console.log node_modules/deck.gl/dist/lib/init.js:44
  deck.gl 4.1.5 - set deck.log.priority=1 (or higher) to trace attribute updates
console.error node_modules/react-dom/cjs/react-dom.development.js:9747
  The above error occurred in the <WebGLRenderer> component:
      in WebGLRenderer (created by DeckGL)
      in DeckGL (at DeckGLOverlay.jsx:54)
      in DeckGLOverlay (at MapGL.jsx:68)
      in div (created by StaticMap)
      in div (created by StaticMap)
      in StaticMap (created by InteractiveMap)
      in div (created by InteractiveMap)
      in InteractiveMap (at MapGL.jsx:62)
      in MapGL (created by WrapperComponent)
      in WrapperComponent

  Consider adding an error boundary to your tree to customize error handling behavior.
  Visit react-error-boundaries to learn more about error boundaries.

● MapGL test › renders without crashing

TypeError: Cannot read property 'state' of null

  at setParameters (node_modules/luma.gl/dist/webgl-utils/set-parameters.js:151:18)
  at setParameters (node_modules/luma.gl/dist/webgl/context-state.js:240:36)
  at DeckGL._onRendererInitialized (node_modules/deck.gl/dist/react/deckgl.js:192:31)
  at WebGLRenderer._initWebGL (node_modules/deck.gl/dist/react/webgl-renderer.js:150:18)
  at WebGLRenderer.componentDidMount (node_modules/deck.gl/dist/react/webgl-renderer.js:114:12)
  at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:8770:24)
  at commitAllLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:9946:9)
  at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:542:14)
  at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
  at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
  at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
  at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:581:16)
  at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:438:27)
  at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:10050:9)
  at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:11017:42)
  at performWork (node_modules/react-dom/cjs/react-dom.development.js:10967:7)
  at requestWork (node_modules/react-dom/cjs/react-dom.development.js:10878:7)
  at scheduleWorkImpl (node_modules/react-dom/cjs/react-dom.development.js:10732:11)
  at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:10689:12)
  at scheduleTopLevelUpdate (node_modules/react-dom/cjs/react-dom.development.js:11193:5)
  at Object.updateContainer (node_modules/react-dom/cjs/react-dom.development.js:11231:7)
  at node_modules/react-dom/cjs/react-dom.development.js:15226:19
  at Object.unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:11102:12)
  at renderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:15225:17)
  at Object.render (node_modules/react-dom/cjs/react-dom.development.js:15290:12)
  at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:218:50)
  at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16)
  at mount (node_modules/enzyme/build/mount.js:19:10)
  at Object.it (src/screens/map/components/MapGL.test.js:83:39)
      at new Promise (<anonymous>)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
      at <anonymous>

Any help with this issue would be much appreciated

Solution

  • I didn't find a way to test the DeckGL component itself, so we have to assume the library has tested thoroughly itself.

    As a workaround, I did this.

    jest.mock('react-map-gl', () => () => <div />)

describe('MapGL test', () => {
  it('renders without crashing', () => {
    const div = document.createElement('div')
    ReactDOM.render(
      <div>
        <MapGL
          gpsPath={mockGpsPath}
          pathColor={mockPathColor}
          pathWidth={mockPathWidth}
          bearing={mockBearing}
        />
      </div>,
      div,
    )
  })
})

    This simply replaces the ReactMapGL code with a single div.