尝试在 Angular13 中引入 Jest

首先

我是22日的文章负责人@neocoronb。
这次我打算在用Angular13创建的工作空间中引入Jest。

环境建设

如果你还没有设置Node的环境，请使用nodebrew或n等版本管理工具进行设置，将Node的版本设置为16.10.0。（只需使用Angular13支持的Node版本即可）
此外，你可以使用npm install -g @angular/cli等命令来设置Angular的环境，请按照你喜欢的方式创建执行环境。如果不确定的话，建议参考官方网站的设置指南。
在使用ng new等命令创建工作空间后，为了确认版本设置是否成功，请执行ng –version来进行检查。
我的环境输出如下所示。

Angular CLI: 13.1.2
Node: 16.10.0
Package Manager: npm 7.24.0
OS: darwin x64

Angular: 13.1.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.2
@angular/cli                    13.1.2
@schematics/angular             13.1.2
rxjs                            7.4.0
typescript                      4.5.4

我們將在以後進行安裝，但這次使用的jest相關版本如下。

"@types/jest": "^27.0.3",
"jest": "^27.4.5",
"jest-preset-angular": "^11.0.1",

关于Jest

Angular默认设置了Jasmine和Karma作为测试工具。Jest是基于Jasmine的库，所以不需要改变编写方式。它执行测试的速度很快，并且非常受欢迎（根据npm趋势）。

我們將立即進行 Jest 環境的搭建，以便能夠使用。

Jest的配置

按照jest-preset-angular的安装步骤进行操作。

首先，我们需要安装Jest和jest-preset-angular。

npm i -D jest @types/jest jest-preset-angular

接下来，我们将创建一个名为jest.config.js的文件，用于描述Jest的配置，并创建一个名为src/jest.ts的文件，用于在执行测试之前进行初始化等操作，并编写import语句。

touch jest.config.js src/jest.ts

import "jest-preset-angular/setup-jest";

require("jest-preset-angular/ngcc-jest-processor");

module.exports = {
  preset: "jest-preset-angular",
  setupFilesAfterEnv: ["<rootDir>/src/jest.ts"],
};

如果不想创建jest.config.js文件，似乎可以通过向package.json中添加以下内容来解决。

{
  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": ["<rootDir>/jest.ts"]
  }
}

将tsconfig.spec.json的内容更改为以下内容。

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest"]
  },
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

通过这个，可以创建一个可以执行 Jest 的环境。

为了使Jest通过npm test命令运行，我们将在package.json的scripts字段中进行追加。

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "jest",
},

现在可以使用Jest来执行Angular测试的环境已经准备好了！

创建，编辑后的文件目录结构如下。

  │  
  ├── src
  │    └─jest.ts
  ├── package.json
  ├── tsconfig.app.json
  ├── tsconfig.spec.json
  └── jest.config.js

我后来知道，有一个叫做Jest Angular Schematic的东西。

yarn ng add @briebug/jest-schematic

这样就可以进行安装了。非常方便。

我认为您只需查阅Angular官方参考资料，然后开始实施您想要进行的单元测试。

总结

由于存在非常详尽的参考资料，因此我能够轻松地引入Jest而没有任何问题。
由于我希望尝试实施端到端测试，所以我想尝试使用Cypress等工具。

请列出参考文献。

jest-preset-angular 安装
jest
npm 趋势
使用 Jest 开始！单元测试 第1回
Jest Angular 图表