Question

我有一个带有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）之所以被调用，是因为它似乎永远无法工作。

Answer 1

我认为这是由单位（％和px）混合的错误引起的-我具有以下配置：

posed.div({
  enter: {
    x: '0%'
  },
  exit: {
    x: '-400px'
  }
})

当我将enter.x更改为0px时，异常消失了。

使用React Pose的react-testing-library

1 个答案: