### 彪哥

爱好前端

- 初识 TypeScript

- TypeScript 常用语法

- ts-axios 项目初始化

- ts-axios 基础功能实现

- ts-axios 异常情况处理

- ts-axios 接口扩展

- ts-axios 拦截器实现

- ts-axios 配置化实现

- ts-axios 取消功能实现

- ts-axios 更多功能实现

- ts-axios 单元测试

  - 前言
  - Jest 安装和配置
    - Jest 安装
    - Jest 配置
  - 辅助模块单元测试
  - 请求模块单元测试
  - headers 模块单元测试
  - Axios 实例模块单元测试
  - 拦截器模块单元测试
  - mergeConfig 模块单元测试
  - 请求取消模块单元测试
  - 剩余模块单元测试

- ts-axios 部署与发布

- 《TypeScript 从零实现 axios》
- ts-axios 单元测试

HuangYi
2020-01-05
目录

# Jest 安装和配置

# # Jest 安装和配置

## # Jest 安装

由于我们的项目是使用 `typescript-library-starter` 初始化的，已经内置了 Jest 的安装，但是安装的版本却不是最新的，我们可以对 `package.json` 中的相关依赖版本做修改，重新安装。

    {
      "@types/jest": "^24.0.13",
      "jest": "^24.8.0",
      "jest-config": "^24.8.0",
      "ts-jest": "^24.0.2",
      "typescript": "^3.4.5"
    }

1
2
3
4
5
6
7

> 注意，这里都是目前最新的版本，未来如果有版本升级的话，可以自行更新到最新版本。

更改版本后，在命令行再次执行 `npm install` 即可安装到相应版本。

## # Jest 配置

在 `package.json` 文件中有 `jest` 字段，对应 Jest 配置：

    "jest": {
      "transform": {
        ".(ts|tsx)": "ts-jest"
      },
      "testEnvironment": "jsdom",
      "testRegex": "/test/.*\\.(test|spec)\\.(ts)$",
      "moduleFileExtensions": [
        "ts",
        "tsx",
        "js"
      ],
      "coverageThreshold": {
        "global": {
          "branches": 90,
          "functions": 95,
          "lines": 95,
          "statements": 95
        }
      },
      "collectCoverageFrom": [
        "src/*.{js,ts}",
        "src/**/*.{js,ts}"
      ],
      "setupFilesAfterEnv": [
        "<rootDir>/test/boot.ts"
      ]
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

接下来，我们就分别来看这几个配置的含义。

- transform
  (opens new window)

简单地说就是一种转换器配置，比如我们这里的

    "transform": {
      ".(ts|tsx)": "ts-jest"
    },

1
2
3

表示的就是使用 `ts-jest` 工具把 `.ts` 和 `.tsx` 文件内容转换成 JavaScript，因为我们也是使用 TypeScript 编写测试代码，而 Node.js 是不能直接支持 TypeScript 的，所以需要配置转换器。

- testEnvironment
  (opens new window)

测试环境。

    "testEnvironment": "jsdom"

1

表示它是一个类浏览器的测试环境，我们可以使用浏览器环境中的一些 API。

- testRegex
  (opens new window)

要测试文件的正则表达式。

    "testRegex": "/test/.*\\.(test|spec)\\.(ts)$"

1

表示 `test` 目录下所有以 `.test.ts` 和 `.spec.ts` 的文件都需要跑测试。

- moduleFileExtensions
  (opens new window)

模块文件扩展名，当你去引入一个模块并没有指定扩展名的时候，它会依次尝试去添加这些扩展名去找你引入的模块文件。

    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ]

1
2
3
4
5

表示优先找 `.ts` 的模块、然后是 `.tsx`，最后是 `.js`。

- coverageThreshold
  (opens new window)

测试覆盖率的阈值设定，当我们的测试覆盖率达不到阈值的时候，测试会失败。

    "coverageThreshold": {
      "global": {
        "branches": 90,
        "functions": 95,
        "lines": 95,
        "statements": 95
      }
    }

1
2
3
4
5
6
7
8

表示全局的代码分支覆盖率要达到 `90%`，方法覆盖率要达到 `95%`，代码行数覆盖率达到 `95%`，声明覆盖率达到 `95%`。

- collectCoverageFrom
  (opens new window)

收集指定文件的测试覆盖率(即使你没为这些文件编写测试)，它的值为 glob patterns
(opens new window) 类型。

    "collectCoverageFrom": [
      "src/*.{js,ts}",
      "src/**/*.{js,ts}"
    ]

1
2
3
4

表示收集 `src` 目录以及它的所有子目录中的 `js` 和 `ts` 文件的测试覆盖率。

- setupFilesAfterEnv
  (opens new window)

测试框架安装后立即执行的代码文件列表。

    "setupFilesAfterEnv": [
      "<rootDir>/test/boot.ts"
    ]

1
2
3

表示每次跑具体测试代码之前会先运行 `<rootDir>/test/boot.ts` 中的代码，`<rootDir>` 表示当前项目的根目录。这个配置在之后的章节我们会具体介绍。

其他关于 Jest 的配置，感兴趣的同学可以去官网
(opens new window)做扩展学习。

至此，我们学习了 Jest 的安装和配置，下节课我们就开始编写 `ts-axios` 库的单元测试。

编辑
(opens new window)
#TypeScript
上次更新: 2022/12/14, 19:36:42
前言
辅助模块单元测试

← 前言 辅助模块单元测试→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式