useAnimatedStyle broken in Jest

Description

I’ve upgraded to 2.0.0 and trying #1731 mocks on my project. I’m getting this error:

TypeError: Cannot convert undefined or null to object
        at Function.values (<anonymous>)

      31 |   }, [isVisible])
      32 |
    > 33 |   return useAnimatedStyle(() => ({
         |          ^
      34 |     transform: [{ translateY: offsetY.value }],
      35 |     opacity: interpolate(offsetY.value, [from, to], [0, 1], Extrapolate.CLAMP),
      36 |   }))

      at useAnimatedStyle (node_modules/react-native-reanimated/src/reanimated2/Hooks.js:421:25)
      at useAnimateVisibility (src/app/hooks/useAnimateVisibility.tsx:33:10)
      at FormErrorMessage (src/app/components/Forms/FormErrorMessage.tsx:16:27)
      at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5552:18)
      at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7918:13)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9019:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12649:12)
      at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12622:22)
      at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12333:9)
      at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1825:24
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:653:12)
      at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1775:10)
      at flushSyncCallbackQueueImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1820:7)
      at flushSyncCallbackQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1808:3)
      at batchedUpdates (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12401:7)
      at act (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14936:14)
      at renderWithAct (node_modules/@testing-library/react-native/build/render.js:68:20)
      at render (node_modules/@testing-library/react-native/build/render.js:46:20)
      at renderWithProviders (src/app/utils/testing/render.tsx:47:10)
      at _callee2$ (src/features/forgotPassword/components/ForgotPasswordForm.test.tsx:24:27)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:63:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:293:22)
      at Generator.next (node_modules/regenerator-runtime/runtime.js:118:21)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:63:40)
      at invoke (node_modules/regenerator-runtime/runtime.js:154:20)
      at node_modules/regenerator-runtime/runtime.js:189:11
      at callInvokeWithMethodAndArg (node_modules/regenerator-runtime/runtime.js:188:16)
      at AsyncIterator.enqueue (node_modules/regenerator-runtime/runtime.js:211:13)
      at AsyncIterator.next (node_modules/regenerator-runtime/runtime.js:118:21)
      at Object.<anonymous>.exports.async (node_modules/regenerator-runtime/runtime.js:238:14)
      at Object._callee2 (src/features/forgotPassword/components/ForgotPasswordForm.test.tsx:21:26)

Looks like something on useAninimatedStyle is broken. I don’t have sure, but it looks like the only offending error on my test. suit

Package versions

• React Native: 0.63
• React Native Reanimated: 2.0.0

[samih7]

I’m facing the same issue with useDerivedValue in Jest environment, this line https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Hooks.js#L543 throws:

TypeError: Cannot convert undefined or null to object
        at Function.values (<anonymous>)

[mgambati]

@piaskowyk Just found what was wrong.

I was using a custom babel.config.js which specifies different plugins per environment, like this:

module.exports = api => {
  const babelEnv = api.env()
  const baseConfig = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      'macros',
      [
        'babel-plugin-root-import',
        {
          rootPathSuffix: './src/',
          rootPathPrefix: '~/',
        },
      ],
    ],
  }

  const isInTesting = babelEnv === 'test'

  if (isInTesting)
    return {
      ...baseConfig,
      plugins: [
        ...baseConfig.plugins,
        // Mock .env during testing
        'react-native-config-node/transform',
      ],
    }

  return {
    ...baseConfig,
    plugins: [...baseConfig.plugins, 'react-native-reanimated/plugin'],
  }
}

I found that react-native-reanimated/plugin is needed when testing too. I’ve just added it to baseConfig and it fixed the bug.