Тестирование компонента response-map-gl / deck.gl с помощью Jest / Enzyme вызывает ошибку TypeError: невозможно прочитать свойство 'state' of null '

Я пытаюсь создать простой тест «рендеринг без сбоев» для моих компонентов React, который содержит компоненты ReactMapGL, который сам содержит компонент 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.info 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>

Любая помощь в этом вопросе будет принята с благодарностью.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
900
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не нашел способа протестировать сам компонент 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.

Другие вопросы по теме