jest 测试入门(一)

说实话,作为前端来说,单元测试,并不是一种必须的技能,但是确实一种可以让你加法的技能

之前我一个库添加了单元测试,加完之后感悟颇深,所以写下这篇文章来记录

环境搭建

一般来说,普通的库,如果没有添加 babel 的话,在 test 里面,也是不能使用 es6 的语法的

总结来说 test 文件的兼容性是和普通文件一样的

正常 JS

这个搭建环境就有关于 babel 的搭建

npm i -D @babel/core @babel/preset-env @types/jest babel-jest jest

添加文件 babel.config.js:

module.exports = {

  presets: [

  ['@babel/preset-env', {targets: {node: 'current'}}],

  '@babel/preset-typescript',

  ],

  plugins: ["@babel/plugin-proposal-class-properties"]

};

如果有特效的语法需求,则需要添加其他的 babel 包,如:

npm i -D @babel/plugin-proposal-class-properties

在 package.json 中添加

"jest": {

  "testMatch": \[

  "<rootDir>/test/?(\*.)(spec|test).{js,jsx,ts,tsx}"

  \],

  "transform": {

  "^.+\\\\.\[t|j\]s?$": "babel-jest"

  },

  "transformIgnorePatterns": \[

  "<rootDir>/node\_modules/(?!(lodash-es|other-es-lib))"

  \],

  "testEnvironment": "jsdom",

  "moduleFileExtensions": \[

  "web.js",

  "js",

  "web.ts",

  "ts",

  "web.tsx",

  "tsx",

  "json",

  "web.jsx",

  "jsx",

  "node"

  \]

}

typescript

如果你使用的是 typescript,那么就不需要添加 babel,只需要如下三个库即可

@types/jest ts-jest jest

在 package.json 中:

将

"transform": {

  "^.+\\\\.\[t|j\]s?$": "babel-jest"

  },

改为:

"transform": {

  "^.+\\\\.\[t|j\]s?$": "ts-jest"

},

即可

关于 jest 参数

`testMatch`[array]

(默认值:[ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)" ])

Jest用于检测测试文件的全局模式。默认情况下，它会在__tests__文件夹内查找.js，.jsx，.ts和.tsx文件，以及带有.test或.spec后缀的任何文件。（例如，Component.test.js或Component.spec.js）。它还会找到名为test.js或spec.js的文件。

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

默认值：undefined

从正则表达式到转换器路径的映射。转换器是提供同步功能以转换源文件的模块。例如，如果您希望能够在模块或测试中使用节点尚不支持的新语言功能，则可以插入许多将JavaScript的未来版本编译为当前版本的编译器之一。示例：请参见examples / typescript示例或[webpack教程](https：// jestjs。 io / docs / zh-Hans / webpack)

`transformIgnorePatterns`[array]

默认值︰["node_modules"]

转换前与所有源文件路径匹配的regexp模式字符串数组。如果测试路径与任何模式匹配，则将不会对其进行转换。

`testEnvironment` [string]

默认值︰"jsdom"

将用于测试的测试环境。 Jest中的默认环境是通过jsdom的类似于浏览器的环境。如果要构建节点服务，则可以使用node选项来使用类似节点的环境。

`moduleFileExtensions`[array]

Default:["js", "json", "jsx", "ts", "tsx", "node"]

模块使用的文件扩展名数组。如果您需要模块而未指定文件扩展名，则这些是Jest将按从左到右的顺序查找的扩展名。

以上说明来自于 jest 官网

实战

此处以我的库 storage 来举例

首先想要测试就要穷举所以可能出现的情况

describe('Normal setting', () => {

  test('set value', () => {

  localStorage.clear();  

  const ins = storage.set('gre', '123456');

  expect(ins.value).toBe('123456');

  expect(ins.status).toBe(0);

  expect(ins.key).toBe(preId + 'gre');

  })

})

此处可以看做一个 localStorage 的 setItem;

expect 的作用是验证 代码的数据 和你想要得到的数据是否相同,

如果相同,那么就代表测试通过,反正则未通过;

expect 后面跟着的方法很多,具体可以去官网查看:

官网传送门

测试结果

使用命令来运行 test 文件:

"test": "jest --coverage"

test 的结果如下:

coverage 选项的作用是生成文档,来记录此次的测试结果,

而结果文档基本生成在根文件目录下的 coverage 目录下,如图:

在 lcov-report 目录下,可直接在浏览器内运行 index.html ,这个文件的运行结果和 test 结果相同;

还有更加有用的东西:

运行 index.ts.html,可以看到一个类似于 git 提交的一个东西:

可以看到你的 test 代码中,哪些代码是运行到的,哪些是未运行到的,

再根据此文件的结果来优化另外的代码;

结语

如果简单的测试,其实是一个很容易的技能,但是各种情景都是不一样的,比如有项目里加入了 react 和 redux 等等,光是配置都是比较麻烦的,所以后面还需要自己努力,去接触各种各样的情况

此文中使用的项目链接:

https://github.com/Grewer/storage-DAO