angular - 我可以通过 Angular CLI 运行 Jest 吗？

Question

我已将 Angular 6 应用程序配置为在运行“npm run test”时使用 Jest 运行测试。这很好用。我希望能够在执行“ng 测试”时运行那些相同的测试。是否可以配置 Angular CLI 来执行此操作？

Answer 1

我真的推荐使用 Jest builder如果你想在你的 Angular CLI 项目中切换到 Jest。我们刚刚在我们的一个项目中从 Karma 迁移到 Jest，它就像一个魅力。作为引用，以下是在新项目中切换到 Jest 的最少步骤:

1. 创建项目

   $ ng new myapp
   $ cd myapp
   

2. 删除 Karma 依赖项、配置文件和 test.ts:

   $ yarn remove karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter
   $ rm src/karma.conf.js src/test.ts
   

3. 安装 Jest 构建器，创建配置文件:

   $ yarn add --dev jest @angular-builders/jest
   $ touch src/jest.config.js
   

4. 在 src/tsconfig.spec.json 中切换到 commonjs:

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

5. 切换到 angular.json 中的 Jest 构建器:

   {
     ...
       "test": {
         "builder": "@angular-builders/jest:run",
         "options": {
           "styles": [
             "src/styles.css"
           ],
           "scripts": [],
           "assets": [
             "src/favicon.ico",
             "src/assets"
           ]
         }
       },
     ...
   }
   

现在您将使用 Jest 运行测试:

$ ng test
 PASS  src/app/app.component.spec.ts
  AppComponent
    ✓ should create the app (223ms)
    ✓ should have as title 'myapp' (80ms)
    ✓ should render title in a h1 tag (70ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        3.704s
Ran all test suites.