2022-03-20

Frontend

Jest 测试框架

一、简介

Jest 是 Facebook 出品的一个测试框架，相对其他测试框架，其一大特点就是就是内置了常用的测试工具，比如自带断言、测试覆盖率工具，实现了开箱即用。
而作为一个面向前端的测试框架，Jest 可以利用其特有的快照测试功能，通过比对 UI 代码生成的快照文件，实现对 React 等常见框架的自动测试。

二、安装 & 运行

2.1、Jest 的安装

Jest 可以通过 npm 或 yarn 进行安装。
以 npm 为例，既可用 npm install -g jest 进行全局安装；也可以只局部安装。

# 全局安全
npm install -g jest
# 局部安装
npm install --save-dev jest

vue 项目中一般通过在 package.json 中配置相关依赖集成 jest。

"devDependencies": {
    "@vue/cli-plugin-unit-jest": "^4.5.15",
    "babel-jest": "23.6.0",
    ...
}

2.2、运行测试

npm run test
根据上面的配置，会自动运行所有测试用例。
npm run coverage
生成测试覆盖率报告。

"scripts": {
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
}

Jest 的测试脚本名形如*.test.js，不论 Jest 是全局运行还是通过 npm run test 运行，它都会执行当前目录下所有的*.test.js 或 *.spec.js 文件，并完成测试。

三、Jest的用法

具体用法参考 JEST 官网，这里只是简单介绍几个常规用法。

3.1、用例的表示

表示测试用例是一个测试框架提供的最基本的 API ， Jest 内部使用了 Jasmine 2 来进行测试，故其用例语法与 Jasmine 相同。test() 函数来描述一个测试用例，举个简单的例子：

// hello.js
module.exports = () => 'Hello world'

// hello.test.js
let hello = require('hello.js')
test('should get "Hello world"', () => {
    expect(hello()).toBe('Hello world') // 测试成功
    // expect(hello()).toBe('Hello') // 测试失败
})

其中 toBe(‘Hello world’) 便是一句断言（ Jest 管它叫 “matcher” ，想了解更多 matcher 请参考文档）。写完了用例，运行在项目目录下执行npm test，即可看到测试结果。

四、Jest.config.js配置

vue 环境下配置 jest 配置文件Jest.config.js。

module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
      'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: ['jest-serializer-vue'],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
  coverageDirectory: '<rootDir>/tests/unit/coverage',
  // 'collectCoverage': true,
  'coverageReporters': [
    'lcov',
    'text-summary'
  ],
  testURL: 'http://localhost/'
}

4.1、moduleFileExtensions

模块需要测试的文件扩展名，即让jest知道你需要测试覆盖的文件的扩展名都是什么。

moduleFileExtensions  [array<string>]

Default: [“js”, “json”, “jsx”, “ts”, “tsx”, “node”]
模块使用的文件扩展名数组，如果未指定，则使用默认数组，按从左到右的顺序查找的扩展名。
建议将项目中最常用的扩展名放在左侧，因此，如果您使用的是 TypeScript，则可能需要考虑将“ ts”和/或“ tsx”移动到数组的开头。

4.2、transform

文件转换器（编译器）设置，不同的文件需要不同的转换器。

transform [object<string, pathToTransformer | [pathToTransformer, object]>]

如下

transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
      'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
}

常用的转换器如下：

Babel
TypeScript
async-to-gen

如果要自定义编译器，请查看https://jestjs.io/docs/tutorial-react#custom-transformers

4.3、moduleNameMapper

moduleNameMapper [object<string, string>]

模块名称或模块名称数组别名表达式映射，即给模块定义别名，方便后续获取。

moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
}

4.4、snapshotSerializers

snapshotSerializers [array<string>]

快照序列化器，jest 快照序列化模块列表，vue 项目通常设置为 jest-serializer-vue 。

snapshotSerializers: ['jest-serializer-vue 。']

4.5、testMatch

jest 单元测试全局文件路径设置，默认为 .js、.jsx、.ts、.tsx 等文件，或者带 tests 的文件夹及带 .test、.spec后缀的文件。

testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
]

4.6、collectCoverageFrom

一个全局的模式数组，表明测试覆盖率报表覆盖哪些文件。如果一个文件匹配了模式数组，那么测试覆盖率报表将包含它，哪怕这个文件没有测试的用例。

collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}']

4.7、coverageDirectory

coverageDirectory [string],
coverageReporters [array<string | [string, options]>]

coverageDirectory：Jest 输出测试覆盖率报表的文件目录。
coverageReporters：报名工具名称集合，jest 使用这些报表工具来生成测试覆盖率报表。
Default: [“clover”, “json”, “lcov”, “text”]

coverageDirectory: '<rootDir>/tests/unit/coverage',
    // 'collectCoverage': true,
    'coverageReporters': [
        'lcov',
        'text-summary'
    ]

4.8、testURL

JS 项目访问地址，通常为浏览器地址栏链接。
Default: http://localhost

testURL: 'http://localhost/'

参考：
https://jestjs.io/docs/configuration#testurl-string

暂无