react-native - 升级到 react-native 0.56 后无法运行测试
问题描述
我最近将 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>
任何建议将不胜感激。
解决方案
对我来说,降级"babel-preset-react-native": "^5.0.1"
-> "babel-preset-react-native": "4.0.0"
摆脱了那个错误。
请务必删除您的 node_modules 文件夹并运行npm/yarn install
.
推荐阅读
- javascript - 附加
- 如果列表项计数 < 3
- amazon-web-services - 使用 AWS Amplify Storage 将多个用户的文件共享给单个用户
- mysql - 我们如何根据 sparklyr / MySQL 中的滚动行和列值计算唯一值(给出的示例)?
- python - pylint 允许以 X_ / _X 开头/结尾的变量名
- c - 创建要在 Gtk.ListBoxRow 中添加的列表
- python - 如何在不每次加载模型的情况下使用 ray 并行获取模型推断?
- swift - 带有 UI 贝塞尔路径的聊天气泡
- laravel - 如何使用 wherePivot belongsToMany 关系添加多个条件
- flutter - 无效的日期格式 - Flutter/Dart
- java - 使用 this 或传递参数对象有什么区别