解决Angular的长时间测试问题

参与了Angular项目后，我开始以一种直觉的方式写Angular，但问题在于测试的数量太多了。

Angular可以使用ng test来运行测试，但基本上会运行所有的测试，所以当应用程序变得庞大时，一次测试需要花费很长时间，难以轻松进行测试，这是一个困扰的问题（希望能够以较小的单位进行测试…）

（追加说明）使用custom-webpack动态更改测试对象。

以这种方式使用环境变量来指定测试目标。这样做对将来更方便。如果想要快速尝试，添加后面提到的“添加测试入口点”会更加方便。

$ TEST_TARGET='./app/<module>' ng test

引入方式

安装custom-webpack和webpack。custom-webpack需要与Angular版本相匹配才能正常运行。

$ npm install -D @angular-builders/custom-webpack
$ npm install -D webpack

创建一个名为extra-webpack.config.js的文件来定义环境变量。

$ cd path/to/<angular-project>
$ touch extra-webpack.config.js

const webpack = require('webpack');

module.exports = (config) => {
  config.plugins.push(new webpack.DefinePlugin({ 'process.env.TEST_TARGET': JSON.stringify(process.env.TEST_TARGET || './') }));
  return config;
};

修改现存的 angular.json 文件。

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

在 test.ts 文件中的 require.context() 方法的路径中指定环境变量。

- const context = require.context('./', true, /\.spec\.ts$/);
+ const context = require.context(process.env.TEST_TARGET, true, /\.spec\.ts$/);

以上就是全部了。

添加测试的入口点

添加测试的入口点，以较小的单元，例如模块单位进行测试。

ng test 确定测试的目标，基于 src/test.ts 中的内容作为测试的入口点（如果没有特定的配置）。尽管可以修改这个入口点来限定测试的目标，但每次都重新编写这样的设置可能会很麻烦。

...
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
...

如果使用主要选项，您可以在运行时指定入口点，因此您需要准备所需的入口点。

以下是在按模块进行测试的步骤。

复制test.ts。

将 src/test.ts 复制到模块目录中。

$ cd path/to/<angular-project>
$ cp src/test.ts src/app/<module>

执行

使用主要选项来指定测试的入口点并执行。（在我测试的环境中，如果不指定 –tsConfig，同时指定 ts 会导致编译失败，所以我同时指定了它们）。

$ cd path/to/<angular-project>
$ ng test --main=src/app/<module> --tsConfig=tsconfig.json

总结

使用main选项，可以在小尺度上进行测试，非常令人高兴。但在提交PR之前，务必进行全面测试。