Will's blog Will's blog
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • VUE
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

will

前端小学生
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • VUE
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 初识 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
上次更新: 2024/08/22, 14:42:43
前言
辅助模块单元测试

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

最近更新
01
我用AI写前端代码这一年:从怀疑到真香的转变
09-15
02
基于 Next.js 的无人机数据孪生可视化平台实践
07-17
03
vite 包缓存问题 处理
06-04
更多文章>
Theme by Vdoing | Copyright © 2019-2025 Will | MIT License | 桂ICP备2024034950号 | 桂公网安备45142202000030
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式