React-Testing-Library(RTL): Animation causing TypeError with React Pose

Question

I have a React application with an animation using React Pose (https://popmotion.io/pose/).

This works fine, but when I write an integration test for the component (using react-testing-library), the test fails.

The error I get when running the test is:

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)

This looks to be caused by the regular expression here: https://github.com/Popmotion/popmotion/blob/1b181ee1673003cb7239a2696623da3f494217be/packages/popmotion-pose/src/dom/unit-conversion.ts#L28

The transform variable contains translateX(-100%) translateZ(0), so this check returns null.

I presume the problem I'm having is due to something not being implemented in jsdom (similar to this issue: https://github.com/Popmotion/popmotion/issues/402), but I'm not sure what's missing or why the method above (GetActualMeasurementInPixels) is being called because it looks like it will never work.

Kent (the creator of RTL) advices against testing animations in RTL: twitter.com/kentcdodds/status/1100790220239171586 — J. Hesters
@J.Hesters Hi, I'm not trying to test the animation, I'm trying to test some UI that also happens to have an animation on it. I guess I could try and disable the animation for that test. — DownChapel
I've got the same problem, I think it was introduced by upgrading jest / jsdom? I was using jest --env jest-environment-jsdom-fourteen. — Alex L

Alex L Alex L · Accepted Answer · 2020-02-19T04:40:55

I think this was caused by a bug with mixed units (% and px) - I had the following config:

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

And when I changed enter.x to 0px the exception disappeared.

React-Testing-Library(RTL): Animation causing TypeError with React Pose

1 Answers