从前几天在bitbank LT Night听到了发布之后，我对Jest的单元测试产生了浓厚的兴趣，所以尝试了安装Jest。我在这边看看，那边看看，为了备忘起见，我将步骤总结如下。我将简单地总结我所执行的步骤。

以下是参考的材料：
– 尝试在Azure DevOps上使用Jest测试Angular的CI
– 使用Jest对Angular应用进行单元测试
– @jest-preset-angular的存储库
– 3分钟内使用Jest对Angular 6进行“ng test”

我使用jest-schematic工具来保留jasmine，而不是使用ng add @briebug/jest-schematic来引入。

1. 安装所需的软件包

使用npm安装-D @types/jest jest jest-preset-angular。

修改 package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/jest.ts"
  }

在我的情况下，我将test替换为test:watch，并添加了jest。setupTestFrameworkScriptFile只是写下了要创建的文件的位置，所以如果想把它放在指定的位置之外，只需适当编辑即可。

创建一个jest.ts文件

import 'jest-preset-angular';  
import './jest-global-mocks';  

我們會建立一個名為jest.ts的檔案，其中包含以上所述的內容。只要檔案名稱和您在2中指定的名稱相同，就可以。在這次操作中，我們選擇使用jest.ts。

创建 jest-global-mocks.ts 文件。

只有在想要触摸特殊内容的时候，据说只需要复制官方示例即可，因此我将首先安装的@jest-preset-angular的存储库中的jestGlobalMocks.ts内容直接拿过来。除非特别配置，否则它将与jest.ts放置在相同目录中。

5. 编辑 tsconfig.spec.json

可能大多数情况下，我已经存在tsconfig.spec.json文件，所以只需要修改其内容即可。

  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jest",
      "node"
    ]
  },
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]

我改变的只是将types的jasmine改成了jest。如果收到“找不到tsconfig.spec.json！”的错误消息，按照@jest-preset-angular的README中的Exposed Configuration，在package.json的”jest”下进行设置。

"globals": {
    "ts-jest": {
      "tsConfigFile": "src/tsconfig.spec.json"
    },
    "__TRANSFORM_HTML__": true
  },

只需要作出以下更改，并将tsConfigFile处修改为实际路径即可。如果您还想修改其他设置，可以参考这里。

到目前为止，当执行npm test时，jest应该已经开始运行了。

编辑 angular.json

在我的情况下，当我推送变更后，由于”ng test”测试失败的原因，流水线失败了，所以我需要编辑angular.json文件。
在angular.json文件中，”projects”>”project-name”>”architect”>”test”>”builder”的默认设置是@angular-devkit/build-angular:karma，因此将其更改为”builder”: “@angular-builders/jest:run”。
然后，当我确认运行”ng test”时，提示找不到@angular-builders！所以我运行了npm i -D @angular-builders命令进行安装。现在”ng test”成功运行Jest，成功完成引入！
测试流程可以顺利进行。