如何使用 angular-cli 只执行一个测试规范

您的每个 .spec.ts 文件都将其所有测试分组在 describe 块中，如下所示：

describe('SomeComponent', () => {...}

您可以通过在 describe 函数名称前加上 f 来轻松运行这个单个块：

fdescribe('SomeComponent', () => {...}

如果您有这样的功能，则不会运行其他 describe 块。顺便提一句。你可以用 it => 做类似的事情fit 还有一个“黑名单”版本 - x。所以：

fdescribe 和 fit 仅导致以这种方式运行的函数

xdescribe 和 xit 导致除以这种方式标记的函数之外的所有函数运行

---

在 src 文件夹中配置 test.ts 文件：

const context = require.context('./', true, /\.spec\.ts$/);

将 /\.spec\.ts$/ 替换为您要测试的文件名。例如：/app.component\.spec\.ts$/

这将仅为 app.component.spec.ts 运行测试。

---

您可以使用 Angular CLI（ng 命令）仅测试特定文件，如下所示：

ng test --main ./path/to/test.ts

更多文档位于 https://angular.io/cli/test

请注意，虽然这适用于独立库文件，但不适用于 Angular 组件/服务/等。这是因为 Angular 文件依赖于其他文件（即 Angular 7 中的 src/test.ts）。遗憾的是 --main 标志不接受多个参数。

---

这在每种情况下都对我有用：

ng test --include='**/dealer.service.spec.ts'

但是，我通常为此得到“TypeError：无法读取 null 的属性 'ngModule'”：

ng test --main src/app/services/dealer.service.spec.ts

@angular/cli 10.0.4 版本

---

使用 --include

它适用于 --include

ng test --include src/app/path-to-component/path-component.component.spec.ts

我尝试了 --main，但它显示了所有失败结果，而事实并非如此。我认为 --main 将更改主 test.ts 文件。

---

如果您希望能够控制从命令行选择哪些文件，我设法为 Angular 7 做到了这一点。

总之，您需要安装 @angular-devkit/build-angular:browser，然后创建一个自定义 webpack 插件来传递测试文件正则表达式。例如：

angular.json - 从 @angular-devkit/build-angular:browser 更改测试构建器并设置自定义配置文件：

...

        "test": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js"
            },
...

extra-webpack.config.js - 创建一个从命令行读取正则表达式的 webpack 配置：

const webpack = require('webpack');
const FILTER = process.env.KARMA_FILTER;
let KARMA_SPEC_FILTER = '/.spec.ts$/';
if (FILTER) {
  KARMA_SPEC_FILTER = `/${FILTER}.spec.ts$/`;
}
module.exports = {
  plugins: [new webpack.DefinePlugin({KARMA_SPEC_FILTER})]
}

test.ts - 编辑规范

...
// Then we find all the tests.
declare const KARMA_CONTEXT_SPEC: any;
const context = require.context('./', true, KARMA_CONTEXT_SPEC);

然后使用如下覆盖默认值：

KARMA_FILTER='somefile-.*\.spec\.ts$' npm run test

我记录了 backstory here，提前为类型和错误链接道歉。感谢@Aish-Anu 为我指出正确方向的上述答案。

---

在 bash 终端中，我喜欢使用双破折号。使用 VS Code，您可以右键单击资源管理器中的规范文件，或在打开的选项卡上。然后选择“复制相对路径”。运行以下命令，从剪贴板粘贴相对路径。

npm t -- --include relative/path/to/file.spec.ts

双破折号表示 npm t 的命令选项结束，并将之后的任何内容传递给指向 ng t 的下一个命令。它不需要任何修改，并迅速给出所需的结果。

---

一个简单的方法是用 f 开始描述和所有它。

fdescribe('testecomponente', () => {
  fit('should create', () => {
    //your code 
  }
  
}
  

---

这在 Angular 7 中对我有用。它基于 ng 命令的 --main 选项。我不确定此选项是否未记录并且可能会更改，但它对我有用。我在脚本部分的 package.json 文件中放了一行。使用 ng test 命令的 --main 选项，我指定要执行的 .spec.ts 文件的路径。例如

"test 1": "ng test --main E:/WebRxAngularClient/src/app/test/shared/my-date-utils.spec.ts",

您可以在运行任何此类脚本时运行该脚本。我通过单击 npm 部分中的“test 1”在 Webstorm 中运行它。

---

我使用 grunt 为自己解决了这个问题。我有下面的 grunt 脚本。脚本所做的是获取特定测试的命令行参数以运行并创建 test.ts 的副本并将此特定测试名称放入其中。

要运行它，首先使用以下命令安装 grunt-cli：

npm install -g grunt-cli

将以下 grunt 依赖项放入您的 package.json 中：

"grunt": "^1.0.1",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-exec": "^2.0.0",
"grunt-string-replace": "^1.3.1"

要运行它，请将以下 grunt 文件作为 Gruntfile.js 保存在您的根文件夹中。然后从命令行运行它：

grunt --target=app.component

这将运行 app.component.spec.ts。

Grunt 文件如下：

/*
This gruntfile is used to run a specific test in watch mode. Example: To run app.component.spec.ts , the Command is: 
grunt --target=app.component
Do not specific .spec.ts. If no target is specified it will run all tests.
*/
module.exports = function(grunt) {
var target = grunt.option('target') || '';
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    clean: ['temp.conf.js','src/temp-test.ts'],
    copy: {
      main: {
        files: [
             {expand: false, cwd: '.', src: ['karma.conf.js'], dest: 'temp.conf.js'},
             {expand: false, cwd: '.', src: ['src/test.ts'], dest: 'src/temp-test.ts'}
             ],
      }
    },
    'string-replace': {
          dist: {
            files: {
              'temp.conf.js': 'temp.conf.js',
              'src/temp-test.ts': 'src/temp-test.ts'
            },
            options: {
              replacements: [{
                pattern: /test.ts/ig,
                replacement: 'temp-test.ts'
              },
              {
                pattern: /const context =.*/ig,
                replacement: 'const context = require.context(\'./\', true, /'+target+'\\\.spec\\\.ts$/);'
              }]
            }
        }
    },
    'exec': {
        sleep: {
          //The sleep command is needed here, else webpack compile fails since it seems like the files in the previous step were touched too recently
          command: 'ping 127.0.0.1 -n 4 > nul',
          stdout: true,
          stderr: true
        },
        ng_test: {
          command: 'ng test --config=temp.conf.js',
          stdout: true,
          stderr: true
        }
    }
  });

  // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-string-replace');
    grunt.loadNpmTasks('grunt-exec');
  // Default task(s).
  grunt.registerTask('default', ['clean','copy','string-replace','exec']);

};

---

为像我这样正在寻找一种在 Angular 中运行单个规范并找到此 SO 的人添加此功能。

根据最新的 Angular 文档（撰写本文时为 v9.0.6），ng test 命令有一个 --include 选项，您可以在其中指定 *.spec.(ts|tsx) 文件的目录或仅指定单个 .spec.(ts|tsx) 文件本身。

https://angular.io/cli/test

---

只需在 src 文件夹中的 test.ts 文件中进行少量更改：

const context = require.context('./', true, /test-example\.spec\.ts$/);

这里，test-example 是我们需要运行的确切文件名

同样，如果您只需要测试服务文件，您可以将文件名替换为“/test-example.service”

---

如果您在使用 monorepo 架构的项目中工作，那么您必须在命令行中的脚本后写下项目的名称。例如：

ng test MyProject1Name -- --include='myComponent.component.spec.ts'

---

您可以从 angular-cli 运行此命令，测试将仅包含您想要的规范文件。

ng test --包括规范文件的路径

---