我正在尝试创建一个简单的渲染而不会崩溃'测试包含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>
非常感谢任何有关此问题的帮助
答案 0 :(得分:0)
我没有找到测试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,
)
})
})
这只是用一个div
替换ReactMapGL代码。