Question

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

Answer 1

如果您想在Angular CLI项目中切换到Jest，我真的建议使用Jest builder。在我们的其中一个项目中，我们刚刚从Karma迁移到Jest，它的魅力十足。作为参考，以下是在新项目中切换到Jest的最少步骤：

创建项目
```
test.ts
```
删除Karma依赖项，配置文件和$ yarn remove karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter $ rm src/karma.conf.js src/test.ts：
```
$ yarn add --dev jest @angular-builders/jest
$ touch src/jest.config.js
```
安装Jest构建器，创建配置文件：
```
commonjs
```
在src/tsconfig.spec.json中切换到{ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/spec", "module": "commonjs", "types": [ "jasmine", "node" ] }, "include": [ "**/*.spec.ts", "**/*.d.ts" ] }：
```
angular.json
```

在{ ... "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.

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

return (
      <div key = {this.props.id}>
        <Grid container>
          <Grid item xs={12}>
            <TextField
              multiline
              fullWidth
              id="notes"
              name="notes"
              label="Notes"
              rows="2"
              value={notes}
              onChange={this.handleValueChange}
            />
          </Grid>
        </Grid>
        <Button variant="outlined" color="primary" onClick={this.handleDelete}>
          Delete
        </Button>
      </div>
    );

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

1 个答案: