Enzyme
2018-06-25 本文已影响49人
Metoo丶淡然
http://airbnb.io/enzyme/docs/api/index.html
使用Enzyme测试React(Native)组件 http://insights.thoughtworkers.org/use-enzyme-to-test-the-react-component/
Selector语法: https://github.com/airbnb/enzyme/blob/master/docs/api/selector.md
yarn add enzyme --dev
[已知问题 React 16 支持]
目前最新的React Native依赖React 16 alpha, 导致现有的测试几乎全部失败. 跟踪ISSUE:
https://github.com/airbnb/enzyme/issues/928
官方答复3.0正式发布之后即可支持. 目前有beta版: enzyme@3.0.0-beta.5 , 经测试支持React 16.
需要做如下升级:
package.json
中添加新的依赖:
"babel-plugin-object-assign": "^1.2.1",
"babel-plugin-transform-replace-object-assign": "^0.2.1",
"babel-preset-airbnb": "^2.4.0",
"enzyme": "^3.0.0-beta.5",
"enzyme-adapter-react-16": "^1.0.0-beta.2",
推荐执行命令来完成升级:
npm install --save-dev enzyme@3.0.0-beta.5
npm install --save-dev babel-plugin-transform-replace-object-assign
npm install --save-dev babel-plugin-object-assign
npm install --save-dev babel-preset-airbnb
npm install --save-dev enzyme-adapter-react-16
或
yarn add --dev enzyme@3.0.0-beta.5
yarn add --dev babel-plugin-transform-replace-object-assign
yarn add --dev babel-plugin-object-assign
yarn add --dev babel-preset-airbnb
yarn add --dev enzyme-adapter-react-16
一份完整的列表如下:
"devDependencies": {
"babel-jest": "*",
"babel-plugin-object-assign": "^1.2.1",
"babel-plugin-transform-replace-object-assign": "^0.2.1",
"babel-plugin-transform-runtime": "*",
"babel-preset-env": "*",
"babel-preset-react-native": "1.9.1",
"babel-preset-airbnb": "^2.4.0",
"coveralls": "^2.13.0",
"cz-conventional-changelog": "^2.0.0",
"enzyme": "^3.0.0-beta.5",
"enzyme-adapter-react-16": "^1.0.0-beta.2",
"fetch-mock": "^5.12.2",
"istanbul": "^0.4.5",
"jest": "*",
"react-addons-test-utils": "16.0.0-alpha.3",
"react-dom": "16.0.0-alpha.12",
"react-test-renderer": "16.0.0-alpha.12"
}
然后每个测试中需要设置React的Adapter, 建议写入setupFiles中:
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';// React 15 需要修改对应版本
Enzyme.configure({ adapter: new Adapter() });
这样就可以继续进行Enzyme测试了.
参考资料: