当将测试框架从Angular13迁移到Jest时的备忘录
首先
这是将Angular的测试框架从默认的Jasmine + Karma更改为Jest时的备忘录。
关于报道，我们正在调查中。如果有好的文章，请在评论中告诉我们，我们会很开心的。
版本确认时
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 13.3.9
Node: 14.15.0
Package Manager: npm 6.14.8
OS: linux arm64
Angular: 13.3.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.1303.9
@angular-devkit/build-angular 13.3.9
@angular-devkit/core 13.3.9
@angular-devkit/schematics 13.3.9
@angular/cdk 13.3.9
@angular/cli 13.3.9
@angular/material 13.3.9
@angular/material-moment-adapter 13.3.9
@schematics/angular 13.3.9
rxjs 6.5.5
typescript 4.6.4
Jest的引入流程
- 安装@types/jest和jest-preset-angular。
npm i -D jest @types/jest jest-preset-angular
2. 添加 Jest 配置文件。
touch jest.config.js src/setup-jest.ts
3. 从 jest.config.js 文件中加载 jest-preset-angular 预设。
require('jest-preset-angular');
module.exports = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'], // 後述する@angular-builders/jest導入時は設定が被るので不要になる
moduleNameMapper: {
'^src/(.*)$': '<rootDir>/src/$1',
},
}
从 src/setup-jest.ts 导入 jest-preset-angular/setup-jest 模块。
import 'jest-preset-angular/setup-jest';
5. 对 tsconfig.spec.json 进行修改。
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jest" // jestに変更
]
},
"files": [
"src/setup-jest.ts" // 追加したsetup-jest.tsに変更
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
6. 卸载不再需要的软件包，删除旧的配置文件 karma.conf.js 和测试文件 src/test.js。
rm karma.conf.js src/test.ts
npm uninstall jasmine-core karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-mocha-reporter @types/jasmine @types/jasminewd2 karma-jasmine-html-reporter
因为在protractor.conf.js中使用了jasmine-spec-reporter，所以先搁置一下。
7. 使用以下命令执行，将现有的测试代码迁移到Jest。
npx jest-codemods
用 npx jest 命令确认测试是否执行。
设置ng test命令的配置
1. 安装 @angular-builders/jest。
@angular-builders/jest是一个能够通过ng test命令运行使用jest-preset-angular进行测试的包。
npm i -D @angular-builders/jest
将angular.json中的test命令修改如下。
"test": {
"builder": "@angular-builders/jest:run",
"options": {
"configPath": "./jest.config.js"
}
}
configPath ：相対的な jest 構成ファイルへのパスを指定
3. 使用ng test指令可以执行Jest的测试。
在进行ng test时，出现了通过import引入的错误。
Cannot set base providers because it has already been called
import 'jest-preset-angular/setup-jest';
src/setup-jest.tsとnode_modules/@angular-builders/jest/dist/jest-config/setup.jsのimportが被っていたため発生しました。
今回はsrc/setup-jest.tsが１行のみだったので、jest.config.jsのsetupFilesAfterEnvを指定しない形で修正しました。
require('jest-preset-angular');
module.exports = {
preset: 'jest-preset-angular',
//setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
moduleNameMapper: {
'^src/(.*)$': '<rootDir>/src/$1',
},
}
以文件单位或目录单位为基准进行测试。
- テスト実行したいファイルまたはディレクトリのパスをnpx jestの末尾に指定する。
npx jest src/app/pages/xxx/xxx.component.spec.ts
@angular-builders/jest使用時は下記で実行可能。
ng test --test-path-pattern=${file_path}
将zone.js的版本更新至0.11.1或更高版本。
-
- v0.11.1より以前はファイル構成が異なりエラーになるため、v0.11.1以降にアップデートを行う。
v0.11.1以降、Zone.jsはAngularPackageFormatに準拠している。
在 launch.json 中添加 Jest 测试的调试配置。
- launch.jsonにデバッグ構成を追加するため、devcontainer.json > launch > configurationsに下記を追加します。
{
...
"launch": {
"configurations": [
...
{ // Jest：全ファイルデバッグ
"type": "node",
"request": "launch",
"name": "Jest All",
"program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
"cwd": "${workspaceFolder}",
"args": [
"test",
"--testMatch=\"**/+(*.)+(spec|test).+(ts|js)?(x)\"",
"--runInBand"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
},
{ // Jest：単一ファイルデバッグ
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
"cwd": "${workspaceFolder}",
"args": [
"test",
"--testMatch=\"**/+(*.)+(spec|test).+(ts|js)?(x)\"",
"--test-path-pattern=${fileBasenameNoExtension}",
"--runInBand"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
}
]
},
}
VSCode插件
Jest Runner – Visual Studio 市集
- 単体テストのデバッグ。Debug > breakpoint設定で値が確認できるのであると便利かも。
引入程序
更新devcontainer.json
extensionsにJest Runnerの拡張機能IDを追加します。
@angular-builders/jestを導入しているので、Jest RunnerのJestコマンドをjestrunner.jestCommandで設定します。
jestrunner.debugOptionsにデバッグオプションを追加します。
この設定を追加することで、Debugクリック時にng testを実行します。
{
"dockerComposeFile": ["docker-compose.yml"],
"service": "node",
...
"extensions": ["firsttris.vscode-jest-runner"], // 拡張に追加
"settings": {
...
"jestrunner.jestCommand": "ng test --", // 拡張機能Jest Runnerで実行する際の代替Jestコマンドを定義
"jestrunner.debugOptions": { // 拡張機能Jest RunnerのDebug用オプション
"program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
"args": ["test", "--testMatch=\"**/+(*.)+(spec|test).+(ts|js)?(x)\""],
"skipFiles": ["<node_internals>/**/*.js", "node_modules/"]
}
}
}
我参考了那篇文章。
-
- Angular テストフレームワーク を jasmine/karma から Jest に移行しました – KAKEHASHI Tech Blog
-
- AngularプロジェクトへJestを導入する | lacolaco/tech
-
- Jestへの移行 · Jest
-
- Jestの設定 · Jest
-
- Jest CLI オプション · Jest
-
- Jestの環境設定と使いこなし術（サーバサイド向け） | DevelopersIO
-
- Jest で Angular 単体テストをセットアップする方法
- How to Set Up Angular Unit Testing with Jest
