Jest Error "Cannot read property 'validAttributes' of undefined" on ReactNative 0.48

user_2108798 0
Viewed 653

We have an app we recently updated from ReactNative 0.42 to 0.48. In that update we migrated to Jest for testing (from mocha/chai/enzyme). We are currently using Jest v21.1.0. When I run each test manually, they all pass without error. When I run just yarn jest I get this error:

/scratch/react_native_app/client/node_modules/react-native/Libraries/Renderer/ReactNativeStack-dev.js:2582
warnForStyleProps$1(nativeProps,viewConfig.validAttributes);
                                          ^

TypeError: Cannot read property 'validAttributes' of undefined
    at setNativePropsStack$1 (/scratch/react_native_app/client/node_modules/react-native/Libraries/Renderer/ReactNativeStack-dev.js:2582:43)
    at Component.setNativeProps (/scratch/react_native_app/client/node_modules/react-native/Libraries/Renderer/ReactNativeStack-dev.js:2550:1)
    at AnimatedProps.callback [as _callback] (/scratch/react_native_app/client/node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:1819:20)
    at AnimatedProps.update (/scratch/react_native_app/client/node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:1698:6)
    at /scratch/react_native_app/client/node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:230:69
    at Set.forEach (native)
    at _flush (/scratch/react_native_app/client/node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:230:16)
    at AnimatedValue._updateValue (/scratch/react_native_app/client/node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:939:1)
    at TimingAnimation.animation.start._this9._animation [as _onUpdate] (/scratch/react_native_app/client/node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:906:8)
    at TimingAnimation.onUpdate (/scratch/react_native_app/client/node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:345:6)

I cannot be sure, but we only have two components that deal with Animations and timing. We are using jest.useFakeTimers(); If I add a jest.runAllTimers(); I can get the error on individual component. The timing portions of the component look like this:

  componentDidMount() {
      Animated.timing(
        this.state.fadeAnim, {
          toValue: 1,
          delay: 2000
        }
      ).start();
  }

And 

<Animated.View style={{ opacity: this.state.fadeAnim }}>
 ...
</Animated.View>
react-native jestjs
1 Answers

It took quite some time, but I finally figured out what was going on. Basically, more of my tests were rendering the Animated view then I thought. I had originally included jest.useFakeTimers(); in my specific test for the component, but then I moved that into a setup file named test/jest_setup.js and then added this to my package.json file:

  "jest": {
    "setupFiles": [
      "./node_modules/react-native/jest/setup.js",
      "./test/jest_setup.js"
    ],
    // rest of jest config
  }

Now my errors are gone!

user_21087980
Related