作者简介
琨玮,携程高级前端开发工程师,从事React Native/Web前端的开发及维护工作,喜欢研究新技术。
在较大规模的前端项目中,测试对于保证代码质量十分重要,而React的组件化和函数式编程, 这种相同输入一定返回相同输出的幂等特性特别适合单元测试。本篇即是React和React Native项目单元测试的完整方案介绍。
一、技术选型: Jest + Enzyme + react-hooks-testing-library
1.1 jest
Jest是FaceBook出品的前端测试框架,适合用于React和React Native的单元测试。
有以下几个特点:
简单易用:易配置,自带断言库和mock库。
快照测试:能够创造一个当前组件的渲染快照,通过和上次保存的快照进行比较,如果两者不匹配说明测试失败。
测试报告:内置了Istanbul,通过一定配置可以测试代码覆盖率,生成测试报告。
1.2 Enzyme
Enzyme是AirBnb开源的React测试工具库,通过一套简洁的api,可以渲染一个或多个组件,查找元素,模拟元素交互(如点击,触摸),通过和Jest相互配合可以提供完整的React组件测试能力。
二、环境配置
直接贴上所需要安装的依赖:
"devDependencies": {
"@testing-library/react-hooks": "^3.2.1", //React Hooks测试支持,仅支持React 16.9.0以上
"babel-jest": "^24.8.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0", //依据对应React版本安装,React 15需安装enzyme-adapter-react-15
"jest": "^24.8.0",
"jest-junit": "^7.0.0",
"jest-react-native": "^18.0.0", //RN支持,非RN可以不装
"react-test-renderer": "16.9.0",
"redux-mock-store": "^1.5.3" //Redux测试模拟store
}
根目录下添加jest.config.js文件作为配置文件:
module.exports = {
preset: 'react-native',
globals: { //模拟的全局变量
_window: {},
__DEV__: true,
},
setupFiles: ['./jest.setup.js'], //运行测试前需运行的初始化文件,例子在下方
moduleNameMapper: { //需要模拟的静态资源
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
"\\.(css|less|scss)$": "<rootDir>/__mocks__/stylesMock.js"
},
transform: { //转译配置,RN项目配置如下,普通React项目可以使用babel-jest
'^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
},
testMatch: ['**/__tests__/**/*.(spec|test).js'],//正则匹配的测试文件
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
unmockedModulePathPatterns: ['<rootDir>/node_modules/react'],
collectCoverage: true,
collectCoverageFrom: [//生成测试报告时需覆盖测试的文件
'src/**/*.js',
],
coverageReporters: ['text-summary', 'json-summary', 'lcov', 'html', 'clover'],
t