React-native: TypeError in AnimatedComponent : Cannot read property '__getValue' of undefined

[atasmohammadi]

The code above, is a very simple test, which was passing till RN 0.53.3, since we upgrade to 0.54.0 it stopped working

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 9.3.0
Yarn: 1.5.1
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: 0.54.0 => 0.54.0

Expected Behavior

Test should pass

Actual Behavior

Test results ( jest --coverage --runInBand --forceExit )

FAIL  src/__tests__/App.spec.js (16.805s)
  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5530
      The above error occurred in the <AnimatedComponent> component:
          in AnimatedComponent (created by Card)
          in Card (created by Container)
          in Container (created by CardStack)
          in View (created by View)
          in View (created by CardStack)
          in View (created by View)
          in View (created by CardStack)
          in CardStack (created by Transitioner)
          in View (created by View)
          in View (created by Transitioner)
          in Transitioner (created by CardStackTransitioner)
          in CardStackTransitioner
          in Unknown (created by Navigator)
          in Navigator (created by NavigationContainer)
          in NavigationContainer (created by App)
          in MQTTClient (created by MQTTReduxStoreSynchronizer)
          in MQTTReduxStoreSynchronizer (created by Connect(MQTTReduxStoreSynchronizer))
          in Connect(MQTTReduxStoreSynchronizer) (created by App)
          in BackgroundLocationContext (created by Connect(BackgroundLocationContext))
          in Connect(BackgroundLocationContext) (created by App)
          in Wrapper (created by Connect(Wrapper))
          in Connect(Wrapper) (created by App)
          in ThemeProvider (created by App)
          in View (created by View)
          in View (at Root.js:13)
          in Root (created by Styled(Root))
          in Styled(Root) (created by App)
          in MQTTProvider (created by App)
          in CrashReporting (created by Connect(CrashReporting))
          in Connect(CrashReporting) (created by App)
          in App (created by Connect(App))
          in Connect(App)
          in Provider

      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

  ● renders correctly

    TypeError: Cannot read property '__getValue' of undefined

      at AnimatedComponent.render (node_modules/react-native/Libraries/Animated/src/createAnimatedComponent.js:147:9)
      at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3656:31)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3633:12)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4008:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6007:16)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6071:26)
      at Object.invokeGuardedCallback$1 (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1559:10)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1506:29)
      at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6149:7)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6797:24)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6750:7)
      at requestWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6661:7)
      at scheduleWorkImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6515:11)
      at scheduleWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6472:12)
      at scheduleTopLevelUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6976:5)
      at Object.updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7014:7)

Steps to Reproduce

import React from 'react'
import renderer from 'react-test-renderer'
import App from '../App'
import createStore from '../createStore'
import { Provider } from 'react-redux'

it('renders correctly', () => {
  const store = createStore()
  const wrapper = renderer.create(
    <Provider store={store}>
      <App />
    </Provider>
  )
  wrapper.unmount()
})

[eduardojunio]

Same issue here

[alloy]

I had this issue too and solved it by making sure my react-test-renderer dependency matches the React version that React Native depends on. i.e.

{
  "devDependencies": {
    "react-test-renderer": "^16.3.0-alpha.1"
  }
}

[gre]

upgrading react-test-renderer did the trick for me too

[AlmogRnD]

I'm getting the same issue

TypeError: Cannot read property '__getValue' of undefined

      at AnimatedComponent.render (node_modules/react-native/Libraries/Animated/src/createAnimatedComponent.js:145:31)

Tried updating jest and react-test-renderer but still getting the issue

"devDependencies": {
    "babel-jest": "^21.2.0",
    "babel-preset-react-native": "2.0.0",
    "detox": "^7.1.0",
    "eslint": "^4.18.1",
    "jest": "^21.2.1",
    "mocha": "^5.0.1",
    "react-native-schemes-manager": "^1.0.0",
    "react-test-renderer": "^16.2.0",
    "redux-mock-store": "^1.5.1",
    "remote-redux-devtools": "^0.5.12"
  },
  "jest": {
    "preset": "react-native",
    "coverageDirectory": "./coverage/",
    "collectCoverage": true,
    "transformIgnorePatterns": [
      "node_modules/jest-runtime/build/script_transformer.js"
    ]
  },

[alloy]

@AlmogRnD You don’t include what RN/React version you are using, but if you think your issue is technically the same then your react-test-renderer version does not match RN 0.54.0’s React dependency which is 16.3.0-alpha.1

[AlmogRnD]

@alloy here is my versions can you tell me which versions I should be on?

"react": "^16.3.0-alpha.1",
"react-native": "^0.54.0",
"jest": "^21.2.1",
"react-test-renderer": "^16.2.0",

[alloy]

@AlmogRnD See my earlier comment.

[coffenbacher]

I have tried all sorts of combinations of react-native, react, and react-test-renderer versions to no avail. Does anyone have any more information on the root cause of this? Or temporarily, a set of version combinations that works?

Edit: got it! Looked at the failing library code, and found that I had to upgrade react-dom manually. Working for me with

    "react": "16.3.0-rc.0",
    "react-dom": "16.3.0-rc.0",
    "react-native": "0.55.0-rc.2",
...
    "react-test-renderer": "16.3.0-rc.0",

[rmnegatives]

@coffenbacher I have this working as of today try that.
"react": "16.3.2", "react-dom": "16.3.2", "react-native": "0.55.0", "react-test-renderer": "16.3.2",

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[arelstone]

upgrading react-test-renderer to same version of react did the trick for me :) Thanks

[kelset]

Based on low activity on the issue and that there is a suggested solution that has been confirmed to work, I'm closing this.