0

我正在尝试为包含 ReactMapGL 组件的 React 组件创建一个简单的“不崩溃渲染”测试，该组件本身包含一个 DeckGL 组件。

这是我写的测试：

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

我也试过这个：

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,
    )
  })
})

这两个测试都会导致以下错误：

    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 测试 › 渲染不崩溃

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>

对此问题的任何帮助将不胜感激

4

1 回答 1

2

我没有找到测试 DeckGL 组件本身的方法，所以我们必须假设库本身已经彻底测试。

作为一种解决方法，我这样做了。

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,
    )
  })
})

这只是将 ReactMapGL 代码替换为单个div.

于 2018-05-23T10:04:16.790 回答