Angular 如何使用jest进行单元测试

为什么选择jest

• 不需要整体编译，可以单文件测试。
• 测试结果稳定。
• 报错清楚，易于定位问题。
• 开箱即用，基本算是全家桶，包含了测试需要的大部分工具：测试结构、断言、spies、mocks。
• 直接提供了测试覆盖率报告。
• 快照测试。
• 非常强大的模块级 mock 功能。
• watch 模式仅仅测试和被修改文件相关的测试，速度非常快。

如何在你的项目中使用jest

1. 安装

   // npm
   npm install jest jest-preset-angular @types/jest --save-dev
   
   // yarn
   yarn add jest jest-preset-angular @types/jest --dev
   

2. 在angular.json中删除test

   "test": {
             "builder": "@angular-devkit/build-angular:karma",
             "options": {
               "main": "src/test.ts",
               "polyfills": "src/polyfills.ts",
               "tsConfig": "tsconfig.spec.json",
               "karmaConfig": "karma.conf.js",
               "assets": [
                 "src/favicon.ico",
                 "src/assets"
               ],
               "styles": [
                 "src/styles.scss"
               ],
               "scripts": []
             }
           },
   

3. 删除karma.conf.js 和 src/test.ts

4. 创建setup-jest.ts文件

   import 'jest-preset-angular';
   

5. 修改 tsconfig.spec.json 文件如下

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

6. 修改package.json

   "test": "jest",
    "test:coverage": "jest --coverage",
   

7. 把jest配置添加到package.json末尾

   "jest": {
       "preset": "jest-preset-angular",
       "setupFilesAfterEnv": [
         "<rootDir>/setupJest.ts"
       ],
       "testPathIgnorePatterns": [
         "<rootDir>/node_modules/",
         "<rootDir>/dist/",
         "<rootDir>/src/test.ts"
       ],
       "globals": {
         "ts-jest": {
           "tsConfig": "<rootDir>/tsconfig.spec.json",
           "stringifyContentPathRegex": "\\.html$"
         }
       }
   }
   

不出意外的话，这个时候当你执行 yarn test 命令时，就可以啦！

jest官网：jestjs.io/docs/en/jes…