Jest单元测试(一)
Jest 简介
Jest是Facebook一套开源的 JavaScript 测试框架，它自动集成了断言、JSDom、覆盖率报告等测试工具。
他适用但不局限于使用以下技术的项目：Babel, TypeScript, Node, React, Angular, Vue
官网地址：https://jestjs.io/en/
Jest 安装
使用 yarn 安装 Jest︰
yarn add --dev jest
或 npm：
npm install --save-dev jest
注：Jest的文档统一使用yarn命令，不过使用npm也是可行的。 你可以在yarn的说明文档里看到yarn与npm之间的对比。
Jest 的基本使用
- 新建项目
jest
├── request.js
├── request.test.js
└── package.json
package
{
"name": "jest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"jest": "^26.6.3"
}
}
- 编写 request.js 文件
function sum(a, b) {
return a + b;
}
module.exports = sum;
- 编写测试 request.test.js 文件
const sum = require('./request.js');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
将下面的配置部分添加到你的 package.json 里面：
{
"scripts": {
"test": "jest"
}
}
- 执行测试用例
最后，运行 yarn test 或 npm run test ，Jest将打印下面这个消息：
PASS ./request.test.js
✓ adds 1 + 2 to equal 3 (5 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.845 s
Ran all test suites.
✨ Done in 3.29s.
生成 Jest 配置文件
全局安装Jest命令行：
yarn global add jest
或者
npm install jest --global
最后，运行 jest --init ，Jest将打印下面这个消息：
LiuJun-MacBook-Pro:jest liujun$ jest --init
The following questions will help Jest to create a suitable configuration for your project
✔ Would you like to use Typescript for the configuration file? … no
✔ Choose the test environment that will be used for testing › node
✔ Do you want Jest to add coverage reports? … yes
✔ Which provider should be used to instrument code for coverage? › v8
✔ Automatically clear mock calls and instances between every test? … yes
Configuration file created at /Users/liujun/Documents/huayun/test/jest/jest.config.js
生成一个基础配置文件 jest.config.js
/*
* For a detailed explanation regarding each configuration property, visit:
* https://jestjs.io/docs/en/configuration.html
*/
module.exports = {
// Automatically clear mock calls and instances between every test
clearMocks: true,
// The directory where Jest should output its coverage files
coverageDirectory: "coverage",
// An array of regexp pattern strings used to skip coverage collection
// coveragePathIgnorePatterns: [
// "/node_modules/"
// ],
// Indicates which provider should be used to instrument code for coverage
coverageProvider: "v8",
// A list of reporter names that Jest uses when writing coverage reports
// coverageReporters: [
// "json",
// "text",
// "lcov",
// "clover"
// ],
// An object that configures minimum threshold enforcement for coverage results
// coverageThreshold: undefined,
// An array of directory names to be searched recursively up from the requiring module's location
// moduleDirectories: [
// "node_modules"
// ],
// An array of file extensions your modules use
// moduleFileExtensions: [
// "js",
// "json",
// "jsx",
// "ts",
// "tsx",
// "node"
// ],
// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
// moduleNameMapper: {},
// A list of paths to directories that Jest should use to search for files in
// roots: [
// ""
// ],
// The paths to modules that run some code to configure or set up the testing environment before each test
// setupFiles: [],
// A list of paths to snapshot serializer modules Jest should use for snapshot testing
// snapshotSerializers: [],
// The test environment that will be used for testing
testEnvironment: "node", // jest-environment-jsdom or node
// The glob patterns Jest uses to detect test files
// testMatch: [
// "**/__tests__/**/*.[jt]s?(x)",
// "**/?(*.)+(spec|test).[tj]s?(x)"
// ]
};
jest.config.js 配置说明：https://jestjs.io/docs/zh-Hans/configuration
https://www.jianshu.com/p/2f00475ade2a
修改 jest.config.js 配置文件
例如，将覆盖率输出的路劲修改为：coverage-test
{
coverageDirectory: "coverage-test",
}
然后添加一个生成覆盖率的脚本 test2
"scripts": {
"test": "jest",
"test2": "jest --coverage"
},
最后执行脚本：yarn test2, 控制台打印如下，并且跟目录会生成 coverage-test 文件夹
LiuJun-MacBook-Pro:jest liujun$ yarn test2
yarn run v1.13.0
$ jest --coverage
PASS ./request.test.js
✓ adds 1 + 2 to equal 3 (3 ms)
(node:59600) ExperimentalWarning: The fs.promises API is experimental
------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
------------|---------|----------|---------|---------|-------------------
All files | 87.5 | 50 | 100 | 87.5 |
request.js | 87.5 | 50 | 100 | 87.5 | 7
------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.824 s
Ran all test suites.
✨ Done in 3.62s.
Jest 配置 Babel
如果项目使用ES6的语法，要给Jest配置Babel
- 修改 request.js 文件
// ES6
export const sum = (a, b) => {
return a + b;
}
// function sum(a, b) {
// return a + b;
// }
// module.exports = sum;
- 修改测试 request.test.js 文件
// ES6
import { sum } from './request.js'
// const sum = require('./request.js');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
- 执行 yarn test , 会发现控制报错，提示需要配置Babel
LiuJun-MacBook-Pro:jest liujun$ yarn test2
yarn run v1.13.0
$ jest --coverage
FAIL ./request.test.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/liujun/Documents/huayun/test/jest/request.test.js:1
({"Object." :function(module,exports,require,__dirname,__filename,global,jest){import { sum } from './request.js'; // const sum = require('./request.js');
^
SyntaxError: Unexpected token {
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
- 配置Babel, 将ES6的语法转成ES5
如果需要使用 Babel，可以通过 yarn来安装所需的依赖。
yarn add --dev babel-jest @babel/core @babel/preset-env
可以在工程的根目录下创建一个babel.config.js文件用于配置与你当前Node版本兼容的Babel：
// babel.config.js
module.exports = {
presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};
Babel的配置取决于具体的项目使用场景 ，可以查阅 Babel官方文档来获取更多详细的信息。
- 最后在执行 yarn test2, 控制输出如下，测试通过
LiuJun-MacBook-Pro:jest liujun$ yarn test2
yarn run v1.13.0
$ jest --coverage
PASS ./request.test.js
✓ adds 1 + 2 to equal 3 (7 ms)
(node:60762) ExperimentalWarning: The fs.promises API is experimental
------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
------------|---------|----------|---------|---------|-------------------
All files | 87.5 | 50 | 100 | 87.5 |
request.js | 87.5 | 50 | 100 | 87.5 | 3
------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.903 s
Ran all test suites.