Реактивно-тестовая библиотека с React Pose

У меня есть приложение React с анимацией с использованием React Pose ( https://popmotion.io/pose/).

Это работает нормально, но когда я пишу интеграционный тест для компонента (используя реагирующую библиотеку), он не проходит.

Ошибка, которую я получаю при запуске теста:

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) вызывается, потому что похоже, что это никогда не сработает.

Источник

0 ответов

Я думаю, это было вызвано ошибкой со смешанными единицами измерения (% и px) - у меня была такая конфигурация:

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

И когда я изменился enter.x к 0px исключение исчезло.

Источник
Другие вопросы по тегам