<AnimatedComponent/> 在 react native 和 jest 中的快照测试失败

Question

我正在使用 jest 创建 react-native 组件的快照。我正在使用 babel 7。我可以创建快照，但快照不是为 TouchableOpacity 组件创建的

我已经尝试将 react-test-renderer 更新到最新版本，但这没有帮助。

快照测试文件 -- 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>
  )
}

这是开玩笑的错误消息

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)

这是我的 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"
  }
}

这是我的 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']
  };
};

这是我的 .babelrc

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

Answer 1

更新您的 babel.config.js 插件列表以在 class-properties 插件之前包含“@babel/plugin-transform-flow-strip-types”：

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

参考： https://github.com/facebook/react-native/issues/20150#issuecomment-417858270

<AnimatedComponent/> 在 react native 和 jest 中的快照测试失败

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

javascript

react-native

jestjs

babel-jest