升级到react-native 0.56后无法运行测试

Question

我最近将react-native更新为0.56。我知道Babel 7的重大更新，并尝试了这里列出的所有内容：https://github.com/facebook/react-native/issues/19859但我仍然无法让我的测试正常运行。将以下行添加到我的package.json有很多帮助。

"transform": {
  "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},

我现在的问题是我无法测试无状态组件。我找不到组件。以下是我的依赖项：

"devDependencies": {
    "babel-preset-react-native": "^5.0.1",
    "@babel/core": "^7.0.0-beta.47",
    "@babel/preset-env": "^7.0.0-beta.47",
    "@babel/preset-flow": "^7.0.0-beta.47",
    "babel-jest": "^23.4.0",
    "babel-core": "^7.0.0-beta.47",
    "babel-eslint": "^8.2.5",
    "babel-loader": "^7.1.5",
    "babel-runtime": "^6.26.0",
    "enzyme": "^3.1.1",
    "enzyme-adapter-react-16": "^1.0.4",
    "eslint": "^4.10.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "eslint-plugin-react-native": "^3.1.0",
    "fetch-mock": "^5.13.0",
    "flow-bin": "^0.61.0",
    "jest": "^23.4.1",
    "react-addons-test-utils": "16.0.0-alpha.3",
    "react-dom": "^16.0.0",
    "react-native-webpack-server": "^0.9.3",
    "react-test-renderer": "16.4.1",
    "redux-mock-store": "^1.3.0",
    "regenerator-runtime": "^0.12.0"
  },

以下是抛出此错误的组件示例以及以下规范：

零件：

import React from 'react'
import { View, ActivityIndicator } from 'react-native'
import styles from '../../styles/components/common/spinner'

const Spinner = ({ size, spinnerStyle, color }) => {
  return (
    <View style={[styles.spinnerStyle, spinnerStyle]}>
      <ActivityIndicator color={color} size={size || 'large'} animating={true} />
    </View>
  )
}

export default Spinner

测试：

import { View } from 'react-native'
import React from 'react'
import { shallow } from 'enzyme'
import Spinner from '../Spinner'
import renderer from 'react-test-renderer';

describe('Spinner', () => {
  var component

  beforeAll(() => {
    component = shallow(<Spinner size={'small'} />)
  })

  it('has the View wrapper', () => {
    expect(component).toHaveChild(View)
  })

  it('has the ActivityIndicator', () => {
    expect(component).toHaveChild('ActivityIndicator')
  })
})

当我将console.log（component.debug（））添加到测试时，我得到以下输出，所以我可以看到组件没有按预期呈现。

<Component style={{...}}>
  <Component color={[undefined]} size="small" animating={true} />
</Component>

任何建议都会非常感激。

Answer 1

对我来说，降级这个"babel-preset-react-native": "^5.0.1" - > "babel-preset-react-native": "4.0.0"摆脱了这个错误。

请务必删除node_modules文件夹并运行npm/yarn install。