干货 | 携程租车React Native单元测试实践

作者简介

 

琨玮，携程高级前端开发工程师，从事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