前端单元测试框架-Jest入门配置(测试TypeScript)

前言：

以前写过潦草的单元测试，当时用的测试框架是mocha, 断言库是用的chai，之后往下学习之后，发现mocha的学习成本有点高，后来就不了了之了，这次我又重学了一下前端的单元测试，发现这次学习的相对来说比较轻松，为什么呢? 因为这次我选用了Jest测试框架, 对于我这种单元测试小白都能用起来、跑起来，而且Jest可以说是零配置，开箱即用，不过对于我这种想深入学习单元测试的，还是得好好看一下官方文档，说不定会用到高级配置的时候，防范于而未然！

主要还是记录一下对Jest踩得坑，这篇文章不是深入的文章，只是简单的入门！！

由于本人使用TypeScript进行书写的代码，所以配置和js的稍微有点不同！

好了，下面步入正题！

介绍

开始学习之前呢，还是得看一下官方对Jest的解释(先扒一扒官网...)：

1. Jest aims to work out of the box, config free, on most JavaScript projects.
2. Make tests which keep track of large objects with ease. Snapshots live either alongside your tests, or embedded inline.
   
3. Tests are parallelized by running them in their own processes to maximize performance.
   
4. From it to expect - Jest has the entire toolkit in one place. Well documented, well maintained, well good.

对于我这种英语都忘了的人，就得用翻译软件了，对应下面的解释：

• Jest的目标是在大多数JavaScript项目中开箱即用，免费配置。
  
• 轻松地进行跟踪大型对象的测试。快照可以与测试一起使用，也可以嵌入到内联中。
  
• 测试通过在它们自己的进程中运行来并行化，以最大化性能。
  
• Jest将整个工具包放在一个地方。良好的文档，良好的维护。
  

cnpm install --save-dev jest typescript ts-jest @types/jest

npm install --save-dev jest

npm install -g cnpm --registry=https://registry.npm.taobao.org

npx ts-jest config:init

使用js的小伙伴，命令如下：

jest --init

使用ES5以上语法的需要babel，需执行一下命令：

cnpm install --save-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',
        },
      },
    ],
  ],
};

具体配置可以去看官方文档

③ 在package.json文件中添加命令

接下来要在package.json文件中添加一条命令，方便我们执行测试命令：

{
    "script": {
        "test": "jest"
    }
}

如果你的package.json里有script属性字段，则直接添加"test": "jest"！

④ 在tsconfig.json文件找到paths属性并添加如下配置:

"paths": {
    "@App/*": ["src/baseTs/*"]
}

这个是什么意思呢？就是设置测试的目录文件的路径.（我这里测试的文件在baseTs里，一些基础的函数）

@App/*就是相当于webpack中的alias一样，就是个别名，不要被吓到！

⑤ 在jest.config.js文件添加如下配置：

const { default: tsjPreset } = require('ts-jest/presets');
module.exports = {
    preset: 'ts-jest',
    rootDir: './'    transform: {
        ...tsjPreset.transform
    },
    testRegex: '(/test/.*\\.(test|spec))\\.[tj]sx?$',
    moduleFileExtensions: [
        "ts",
        "tsx",
        "js",
        "jsx"
    ],
    moduleNameWrapper: {
        '^@APP/(.*)$': '<rootDir>/src/baseTs/$1'
    },
    collectCoverageFrom: {
        "**/baseTs/upperFirst.ts",
        "**/baseTs/camelCase.ts",
        "!**/node_modules/**",
        "!**/vendor/**"
    }
}

好了这些就够了，你现在不需要了解每一项是什么意思，后面我会以注释的格式展现出来，作为参考，现在你就只管copy和paste就可以了！

注意：测试覆盖率这里我只设置了baseTs下的两个文件，也就是upperFirst.ts和camelCase.ts！

⑥ 在项目根目录添加一个目录叫test的目录，如下：

这个目录就是我们要写测试baseTs目录下的目录。

⑦ 下面开始简单的写一下测试文件：

在写之前呢，首先要注意如下：

• 在test目录下创建的测试文件名字最好要和被测试的文件名字保持一致。如：upperFirst.ts文件对应测试文件upperFirst.test.ts（不是必须的）
• 如果是用ES6模块export导出，在测试文件中可以用import导入，否则使用module.exports导出，使用require进行导入
• 导入文件的时候要以@App/为前缀，如果你的项目配置了像@（代表src目录）这样的alias，使用会报错的

npm run test

在测试一下下一个文件：

这里我用了一个叫describe函数，回调函数包裹了两个要测试的断言。

这个describe函数就是套件，套件可以一组一组的进行测试，其他各大测试框架都内含了测试套件，不足为其！

接下来看一下测试结果，如下：

都通过了，是不是很开心呢！

解释一下覆盖率（也就是图中的表格每个单元格代表的含义）：

• % stmts是语句覆盖率（statement coverage）：每个语句是否都执行了
  

• % Branch分支覆盖率（branch coverage）：条件语句是否都执行了

• % Funcs函数覆盖率（function coverage）：函数是否全都调用了

• % Lines行覆盖率（line coverage）：未执行的代码行数

我这里除了条件语句一半左右，其他的都是90%以上，说明代码质量还可以。

当然能有这么通过率，一是代码比较简单，二是单元测试可以让我们知道代码的质量如何，之后再进行改造重构，就可以出来质量高的代码了，以我这两个文件中的其中一个为例（改造之后的代码）：

虽然这个简单的驼峰函数改造之后有点长，但基本符合了面向对象的一条比较重要的准则，即单一职责，一个函数只做一件事情！也基本符合开放封闭原则，因为主函数是有零碎的小函数拼起来的，所以，以后如果我们想改造这个主函数，只需在零碎的函数里改造就可以了，主函数是不需要动的。

例如我想在修改正则的判断，只需在正则函数里修改即可，别的函数都不需要动！

所以说单元测试真的很重要，许多小伙伴可能没有写过，如果你写了单元测试之类的就会改善你现有的代码，从而更好的重构，结果就是质量、维护程度上都提升了很大的层次！

好了，对这两个函数进行了测试，我们最后呢，来看一下Jest的基础配置是怎样的，我是花了一下午的时候进行了筛选，符合刚入门的小伙伴们，对于高级的配置可以去官方文档去查阅，

这里我都用注释进行了说明（个人理解）!!!

下图是Jest.config.js配置：

大家可以根据自己的项目情况和目录，自由的设置，个人尽可能的让注释详细，方便小伙伴进行查阅。由于本人又入了单元测试的坑，还需要继续努力研究，希望大佬可以指出错误的地方，如果有一些关于Jest单元测试的技巧或文章，还请在评论下附一下链接和建议之类的

下面附一下链接：

Jest中文官网首页地址：jestjs.io/zh-Hans/

ts-jest文档地址： kulshekhar.github.io/ts-jest/

Jest配置文档地址：jestjs.io/docs/zh-Han…

以上的配置都是参考第二，第三地址！！