CODEWITHSUNDEEP
javascriptreact-nativejestjsbabel-jest
Akhil Mohammed
Akhil Mohammed

Reputation: 85

Snapshot test fails for <AnimatedComponent/> in react native and jest

I am using jest to create snapshots of react-native components. I'm using babel 7. I can create snapshots but Snapshot is not created for TouchableOpacity component

I have already tried updating react-test-renderer to latest version but that does not help.

The snapshot test file -- Button.test.js

import React from 'react';
import renderer from 'react-test-renderer';

import Button from '../src/components/Button';

test('renders correctly', () => {
  const tree = renderer.create(<Button />).toJSON();
  expect(tree).toMatchSnapshot();
});

Button.js

const Button = (props: Props) => {
  const { text, disabled, style, onPress } = props
  return (
    <TouchableOpacity
      style={[styles.button, style]}
      disabled={disabled}
      activeOpacity={disabled ? 1 : 0.5}
      onPress={!disabled && onPress}
    >
      <Text style={styles.buttonText}>{text}</Text>
    </TouchableOpacity>
  )
}

here's the error message for jest

console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6884

  The above error occurred in the <AnimatedComponent> component:
      in AnimatedComponent (created by TouchableOpacity)
      in TouchableOpacity (created by Button)
      in Button

 TypeError: Cannot read property 'bind' of undefined

  at new bind (node_modules/react-native/Libraries/Animated/src/createAnimatedComponent.js:39:53)

Here's my package.json

{
  "name": "",
  "version": "0.0.1",
  "scripts": {
    "test:unit": "jest",
    "test": "jest",
  },
  "jest": {
    "preset": "react-native",
    "testMatch": [
      "**/?(*.)test.js?(x)"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "setupFiles": [
      "<rootDir>/jest/setup.js"
    ]
  },

  "dependencies": {
    "@babel/runtime": "^7.1.2",
    "react": "16.5.0",
    "react-native": "0.57.2",
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^9.0.0",
    "babel-jest": "^23.6.0",
    "babel-preset-flow": "^7.0.0-beta.3",
    "detox": "^9.0.4",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "1.6.0",
    "enzyme-to-json": "^3.3.4",
    "eslint": "^5.6.0",
    "flow-bin": "0.78.0",
    "husky": "^0.14.3",
    "jest": "23.6.0",
    "jest-snapshot": "^23.6.0",
    "lint-staged": "^7.3.0",
    "metro-react-native-babel-preset": "0.45.4",
    "mocha": "^5.2.0",
    "react-test-renderer": "16.5.2",
    "regenerator-runtime": "^0.12.1"
  }
}

Here's my bable.config.js

module.exports = api => {
  api.cache(true);
  return {
    presets: [
      'module:metro-react-native-babel-preset',
      'flow',
      '@babel/preset-env'
    ],
    plugins: ['@babel/plugin-proposal-class-properties']
  };
};

Here's my .babelrc

{
  "presets": ["module:metro-react-native-babel-preset", "flow"]
}

Upvotes: 4

Views: 1754

Answers (1)

Jason
Jason

Reputation: 56

Update your babel.config.js plugins list to include "@babel/plugin-transform-flow-strip-types" before the class-properties plugin:

plugins: [ "@babel/plugin-transform-flow-strip-types", "@babel/plugin-proposal-class-properties" ]

Reference: https://github.com/facebook/react-native/issues/20150#issuecomment-417858270

Upvotes: 4

Related Questions