0

私は、DeckGL コンポーネントを含む ReactMapGL コンポーネントを含む React コンポーネントの単純な「クラッシュせずにレンダリング」テストを作成しようとしています。

これは私が書いたテストです：

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 に答える