什么是单元测试?
对于前端来说,常见的有单元测试、功能测试、UI 测试 都有各自的定义。
单元测试:对一个模块、一个函数或者一个类来进行正确性检验 (需要通过写代码去实现,我们经常听到的 代码覆盖率 也是单元测试非常重要的一点) 功能测试或 UI测试:通常来说,人工验证就可以,不需要写代码
RN 单元测试 RN是一个UI框架,可以在iOS 和Android 平台实现跨端,那么首先想到的是,官方提供的配套工具。
主流工具 1.jest:Facebook 官方开发,ReactNative 项目本身也是使用 Jest 进行单测的,因此它们俩的契合度相当高
2.react-test-renderer:Facebook 官方在 ReactNative 项目中推荐并使用的开发框架
3. Enzyme:由 airbnb 开发的 React 单测工具
我们应该知道reactNative也是Facebook 开发的,所以,用 jest 和 react-test-renderer 来做 reactNative项目的单元测试是最合适的。 enzyme是Airbnb开发的,Airbnb作为最早期大规模使用reactNative 做跨端开发的公司,它的工具肯定也是具有权威性地。 总结:jest react-test-reanderer 作为官方提供是首选,enzyme 作为知名公司大规模实践的结果 也具有权威性。
那么,我们该如何选择呢? 我们使用官方推荐的方案,jest + react-test-renderer,原因是,对于新手来说 遇到问题后可以更好的解决。
再说说 jest 和 react-test-renderer 各自解决的问题
jest:纯单元测试框架,也就是只涉及代码逻辑的测试 **react-test-renderer:**对渲染结果的测试,前端注重展示,这个框架会提供快照功能,对渲染出来的 UI 样式进行测试,保障UI 还原度
使用步骤:
1.安装 jest
yarn add --dev jest
或
npm install --save-dev jest
2.安装react-test-render
yarn add --dev react-test-renderer
3.配置babel
第一步:需要在项目的根目录里添加 .babelrc 文件,文件中配置 react-native 的预设
{
"presets": ["react-native"],
"sourceMaps": true // 用于对齐堆栈,方便精准的定位单元测试中的问题
}
第二步:安装依赖
yarn add --dev babel-jest babel-core regenerator-runtime
4.在 package.json 中添加 jest 的配置
{
"jest": {
"setupFiles": ["<rootDir>/__mocks__/setup.js"],
"collectCoverage": true,
"collectCoverageFrom": [],
"coveragePathIgnorePatterns": [],
"preset": "react-native",
"transform": {
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!(react-native)/)"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)": "<rootDir>/**mocks**/fileMock.js"
}
}
}
preset:预设 react-native 环境,配和.babelrc 文件的配置,支持 react-naitve 编译
transform:支持 ES6/ES7 语法
transformIgnorePatterns:忽略 node_modules 下除了(js-consultkit|react-native|medical-modules)外的文件
setupFiles:配置 mock 文件的入口,会在测试用例之前编译
collectCoverage:设置是否显示覆盖率
collectCoverageFrom:设置需要纳入单测覆盖率的文件, 如 "/ConsultIM/src/**.js"
coveragePathIgnorePatterns:设置不需要纳入单测覆盖率的文件
moduleNameMapper:代表需要被 Mock 的资源名称。如果需要 Mock 静态资源(如 img、file 等),需要配置 Mock 的路径,如 /mocks/xxMock.js
5.在项目中写测试文件
在工程根目录下创建__tests__文件夹,使用react-native init且 RN 版本在 0.38 以上会自动创建的
6.运行jest,开始单元测试
执行yarn test命令,系统就会开始执行单元测试
待补充。。。。
|