我有一个带有React Pose(https://popmotion.io/pose/)动画的React应用程序。
这可以正常工作,但是当我为组件编写集成测试(使用react-testing-library)时,测试失败。
运行测试时出现的错误是:
Error: Uncaught [TypeError: Cannot read property '1' of null]
at reportException (/app/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
at invokeEventListeners (/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
at HTMLUnknownElementImpl._dispatch (/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
at HTMLUnknownElementImpl.dispatchEvent (/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
at HTMLUnknownElementImpl.dispatchEvent (/app/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
at HTMLUnknownElement.dispatchEvent (/app/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
at Object.invokeGuardedCallbackDev (/app/node_modules/react-dom/cjs/react-dom.development.js:199:16)
at invokeGuardedCallback (/app/node_modules/react-dom/cjs/react-dom.development.js:256:31)
at commitRoot (/app/node_modules/react-dom/cjs/react-dom.development.js:18427:7)
at completeRoot (/app/node_modules/react-dom/cjs/react-dom.development.js:19884:3) TypeError: Cannot read property '1' of null
at Object.x (/app/node_modules/popmotion-pose/lib/index.js:526:64)
at /app/node_modules/popmotion-pose/lib/index.js:593:51
at Array.forEach (<anonymous>)
at convertPositionalUnits (/app/node_modules/popmotion-pose/lib/index.js:592:27)
at transformPose (/app/node_modules/popmotion-pose/lib/index.js:647:20)
at getParentAnimations (/app/node_modules/pose-core/lib/index.js:113:28)
at Object.set (/app/node_modules/pose-core/lib/index.js:167:28)
at /app/node_modules/react-pose/lib/index.js:203:77
at Array.map (<anonymous>)
at PoseElement.Object.<anonymous>.PoseElement.setPose (/app/node_modules/react-pose/lib/index.js:203:30)
at PoseElement.Object.<anonymous>.PoseElement.initPoser (/app/node_modules/react-pose/lib/index.js:197:18)
at PoseElement.Object.<anonymous>.PoseElement.componentDidMount (/app/node_modules/react-pose/lib/index.js:157:18)
at commitLifeCycles (/app/node_modules/react-dom/cjs/react-dom.development.js:16864:22)
at commitAllLifeCycles (/app/node_modules/react-dom/cjs/react-dom.development.js:18219:7)
at HTMLUnknownElement.callCallback (/app/node_modules/react-dom/cjs/react-dom.development.js:149:14)
at invokeEventListeners (/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
at HTMLUnknownElementImpl._dispatch (/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
at HTMLUnknownElementImpl.dispatchEvent (/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
at HTMLUnknownElementImpl.dispatchEvent (/app/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
at HTMLUnknownElement.dispatchEvent (/app/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
at Object.invokeGuardedCallbackDev (/app/node_modules/react-dom/cjs/react-dom.development.js:199:16)
at invokeGuardedCallback (/app/node_modules/react-dom/cjs/react-dom.development.js:256:31)
at commitRoot (/app/node_modules/react-dom/cjs/react-dom.development.js:18427:7)
at completeRoot (/app/node_modules/react-dom/cjs/react-dom.development.js:19884:3)
at performWorkOnRoot (/app/node_modules/react-dom/cjs/react-dom.development.js:19813:9)
at performWork (/app/node_modules/react-dom/cjs/react-dom.development.js:19721:7)
at performSyncWork (/app/node_modules/react-dom/cjs/react-dom.development.js:19695:3)
at Object.batchedUpdates$1 [as unstable_batchedUpdates] (/app/node_modules/react-dom/cjs/react-dom.development.js:19908:7)
at act (/app/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1161:27)
at rtlAct (/app/node_modules/react-testing-library/dist/act-compat.js:29:10)
at Function.fireEvent.(anonymous function).args [as click] (/app/node_modules/react-testing-library/dist/index.js:175:28)
这似乎是由此处的正则表达式引起的:https://github.com/Popmotion/popmotion/blob/1b181ee1673003cb7239a2696623da3f494217be/packages/popmotion-pose/src/dom/unit-conversion.ts#L28
transform
变量包含translateX(-100%) translateZ(0)
,因此此检查返回null
。我想我遇到的问题是由于
jsdom
中没有实现某些东西(类似于此问题:https://github.com/Popmotion/popmotion/issues/402),但是我不确定缺少什么或为什么调用上面的方法(GetActualMeasurementInPixels
),因为看起来像这样将永远无法工作。 最佳答案
我认为这是由混合单位(%和px)的错误引起的-我具有以下配置:
posed.div({
enter: {
x: '0%'
},
exit: {
x: '-400px'
}
})
当我将
enter.x
更改为0px
时,异常消失了。关于reactjs - React-Testing-Library(RTL): Animation causing TypeError with React Pose,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54708019/