jest 测试入门(一)

说实话,做为前端来讲,单元测试,并非一种必须的技能,可是确实一种可让你加法的技能
以前我一个库添加了单元测试,加完以后感悟颇深,因此写下这篇文章来记录

环境搭建

通常来讲,普通的库,若是没有添加 babel 的话,在 test 里面,也是不能使用 es6 的语法的
总结来讲 test 文件的兼容性是和普通文件同样的

正常 JS

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

npm i -D @babel/core @babel/preset-env 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<string>]

(默认值:[ "**/__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教程

transformIgnorePatterns[array<string>]

默认值︰["node_modules"]

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

testEnvironment [string]

默认值︰"jsdom"

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

moduleFileExtensions[array<string>]

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