成都商报官方网站,金融理财管理网站源码 dedecms,巨鹿网站建设多少钱,网站开发第三方登录设计Jest 简介
Jest是Facebook一套开源的 JavaScript 测试框架#xff0c;它自动集成了断言、JSDom、覆盖率报告等测试工具。 他适用但不局限于使用以下技术的项目#xff1a;Babel, TypeScript, Node, React, Angular, Vue
官网地址#xff1a;https://jestjs.io/en/
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.jsonpackage
{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 --initThe 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 testclearMocks: true,// The directory where Jest should output its coverage filescoverageDirectory: 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 coveragecoverageProvider: 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 modules 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: [// rootDir// ],// 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 testingtestEnvironment: 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 --coveragePASS ./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 --coverageFAIL ./request.test.js● Test suite failed to runJest encountered an unexpected tokenThis usually means that you are trying to import a file which Jest cannot parse, e.g. its not plain JavaScript.By default, if Jest sees a Babel config, it will use that to transform your files, ignoring node_modules.Heres 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.Youll find more details and examples of these config options in the docs:https://jestjs.io/docs/en/configuration.htmlDetails:/Users/liujun/Documents/huayun/test/jest/request.test.js:1({Object.anonymous: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 --coveragePASS ./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.