Angular Schematics：在库中运行单元测试时出错

Posted 2023-03-13

【中文标题】Angular Schematics：在库中运行单元测试时出错

【英文标题】：Angular Schematics: Error when running unit test in library

【发布时间】：2020-10-12 14:23:13

【问题描述】：

这是我第一次在原理图领域工作，所以很可能我没有正确设置。但我一直在关注 angular.io 上的指南和一些额外的博客演练。我想将 ng-add 和 ng-update 原理图打包到一个组件库中，我已经设置好并且运行良好。在为 ng-add 设置初始管道之后，我编写了一个简单的单元测试来验证设置，一旦它调用 new SchematicTestRunner，它就会爆发大量未找到模块的错误，包括 child_process和FS。事实上，我在单元测试中注释掉了除了创建测试运行器之外的所有内容，只是为了确定断点。除了按原样返回树之外，原理图本身还没有做任何事情。有趣的是，schematics-cli 生成的“空白”/示例原理图项目根本没有使用 ng test，而是直接使用了 jasmine。但是由于这是在具有完整测试套件的现有 Angular 库中，我想以相同的方式进行测试。对此的任何帮助，将不胜感激！

错误部分：

ERROR in C:/Users/<username>/src/fabric/ui/node_modules/@angular-devkit/schematics/tasks/node-package/executor.js
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\tasks\node-package'
resolve 'child_process' in 'C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\tasks\node-package'
  Parsed request is a module
  using description file: C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\package.json (relative path: ./tasks/node-package)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in C:/Users/<username>/src/fabric/ui
        using description file: C:\Users\<username>\src\fabric\ui\package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\Users\<username>\src\fabric\ui\package.json (relative path: ./child_process)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\child_process doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\child_process.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\child_process.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\child_process.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\child_process.js doesn't exist
            as directory
              C:\Users\<username>\src\fabric\ui\child_process doesn't exist
      C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\tasks\node-package\node_modules doesn't exist or is not a directory
      C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\tasks\node_modules doesn't exist or is not a directory
      C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\node_modules doesn't exist or is not a directory
      C:\Users\<username>\src\fabric\ui\node_modules\node_modules doesn't exist or is not a directory
      C:\Users\<username>\src\fabric\node_modules doesn't exist or is not a directory
      C:\Users\<username>\src\node_modules doesn't exist or is not a directory
      C:\Users\<username>\node_modules doesn't exist or is not a directory
      C:\Users\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules
        using description file: C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
      looking for modules in C:\Users\<username>\src\fabric\ui\node_modules
        using description file: C:\Users\<username>\src\fabric\ui\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\package.json (relative path: ./node_modules/child_process)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\Users\<username>\src\fabric\ui\package.json (relative path: ./node_modules/child_process)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\child_process doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\child_process.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\child_process.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\child_process.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.js doesn't exist
            as directory
              C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process doesn't exist
              C:\Users\<username>\src\fabric\ui\node_modules\child_process.js doesn't exist
            as directory
              C:\Users\<username>\src\fabric\ui\node_modules\child_process doesn't exist
[C:\Users\<username>\src\fabric\ui\child_process]
[C:\Users\<username>\src\fabric\ui\child_process.ts]
[C:\Users\<username>\src\fabric\ui\child_process.tsx]
[C:\Users\<username>\src\fabric\ui\child_process.mjs]
[C:\Users\<username>\src\fabric\ui\child_process.js]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\tasks\node-package\node_modules]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\tasks\node_modules]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\node_modules]
[C:\Users\<username>\src\fabric\ui\node_modules\node_modules]
[C:\Users\<username>\src\fabric\node_modules]
[C:\Users\<username>\src\node_modules]
[C:\Users\<username>\node_modules]
[C:\Users\node_modules]
[C:\node_modules]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process]
[C:\Users\<username>\src\fabric\ui\node_modules\child_process]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.ts]
[C:\Users\<username>\src\fabric\ui\node_modules\child_process.ts]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.tsx]
[C:\Users\<username>\src\fabric\ui\node_modules\child_process.tsx]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.mjs]
[C:\Users\<username>\src\fabric\ui\node_modules\child_process.mjs]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.js]
[C:\Users\<username>\src\fabric\ui\node_modules\child_process.js]
 @ C:/Users/<username>/src/fabric/ui/node_modules/@angular-devkit/schematics/tasks/node-package/executor.js 11:24-48
 @ C:/Users/<username>/src/fabric/ui/node_modules/@angular-devkit/schematics/tasks/node/index.js
 @ C:/Users/<username>/src/fabric/ui/node_modules/@angular-devkit/schematics/testing/schematic-test-runner.js
 @ C:/Users/<username>/src/fabric/ui/node_modules/@angular-devkit/schematics/testing/index.js
 @ ./schematics/ng-add/index.spec.ts
 @ . sync \.spec\.ts$
 @ ./test.ts

【问题讨论】：

您找到解决此问题的方法了吗？我现在遇到了同样的问题，但也是从原理图开始的。

@Brudus 很遗憾没有。仍在试图弄清楚。希望这里有更多原理图经验的人可以为我指明正确的方向。我也一直在通过 github repos 寻找一些迹象。如果我弄清楚了，我会在这里报告。

我发现它实际上与库无关。我可以创建一个全新的项目。运行ng test，一切正常。如果我然后添加SchematicTestRunner，它将导致您在上面列出的问题。对我来说，即使 Angular 团队说不是，这也是一个错误。无论如何，它至少记录得很差。

@Brudus 哦，是的，我知道正是那条特定的线路让我崩溃了。除了 BeforeEach 块中的那一行之外，我已经在我的测试代码中注释了所有其他内容，这绝对是失败的地方。我最初在 angular-cli repo 中提出了一个问题，但他们说要在这里发布，他们不提供支持。我告诉他们你说的同样的事情：他们至少应该考虑提供一些关于原理图单元测试的文档，至少。目前覆盖率为零。

【参考方案1】：

我终于让它运行起来了！ @mfaith 和我在 GitHub 上与 Angular CLI 团队进行了交谈。你可以在这里找到它：https://github.com/angular/angular-cli/issues/17986

有两个重要的要点：

您无法使用ng 命令运行测试、构建和捆绑。因此，ng test 永远不会与原理图测试一起使用，因为它旨在用于浏览器（与 Schematics 不同）。 有一个虚拟项目可以用作参考。只需运行schematics schematic your-name-for-this-project，它将创建一个带有 3 个基本原理图的原理图项目（名为 your-name-for-this-project）。在那里，您可以使用脚本来运行库/应用程序中的原理图测试。

我最终做了以下事情：

我在我的库文件夹中创建了一个文件tsconfig.schematics.spec.json（见下文）。 我在我的项目 package.json 中添加了两个脚本（见下文）。 通过库文件夹中的npm run schm:test 执行脚本。

我猜，最初我这边有两个错误。首先，我想让原理图测试与ng test 一起工作。其次，我可以使用 schematics schematic 项目中的配置文件解决配置问题。

tsconfig.schematics.spec.json：

    "compilerOptions": 
        "baseUrl": "tsconfig",
        "lib": [
            "es2018",
            "dom"
        ],
        "module": "commonjs",
        "moduleResolution": "node",
        "noEmitOnError": true,
        "noFallthroughCasesInSwitch": true,
        "noImplicitAny": true,
        "noImplicitThis": true,
        "noUnusedParameters": true,
        "noUnusedLocals": true,
        "rootDir": "schematics/",
        "skipDefaultLibCheck": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "es6",
        "types": [
            "jasmine",
            "node"
        ]
    ,
    "include": [
        "schematics/**/*"
    ],
    "exclude": [
        "schematics/*/files/**/*"
    ]

package.json 中的 2 个脚本：

"schm:build": "tsc -p tsconfig.schematics.spec.json",
"schm:test": "npm run schm:build && jasmine schematics/**/*.spec.js"

【讨论】：

感谢您帮助我们查明真相。我还注意到“空白”原理图项目使用了不同的测试机制，但我只是假设它是这样他们不必包含尽可能多的依赖项，因为它是一种准系统设置。现在只需找出一种分割测试的好方法，这样原理图就可以与组件存在于同一个库中，但可以独立完成测试。

您如何阻止原理图测试作为常规库 ng 测试的一部分运行？还是您的原理图完全在一个单独的库中？

@mfaith 不，他们在图书馆。 ng 测试在 angular.json 中定义。在项目中找到您的库和测试目标本身。在那里你应该有一些选项（比如 main、tsConfig 和 karmaConfig）。 Main 应该指向 src 文件夹中的文件 test.ts。我的原理图在库中的原理图文件夹中，但在 src 文件夹之外。希望对您有所帮助，否则，请告诉我您的结构是什么样的。

我明白了。是的，从一开始我的库结构就变平了，所以没有 src 文件夹。 projects/ 文件夹下的所有内容都是我的库。我将其设置为类似于 Material 的设置方式。原理图文件夹只是可重用组件文件夹旁边的另一个文件夹。但我想我已经制定了一个分割它们的解决方案，通过调整 test.ts 以将原理图文件夹排除在 ng 测试中。然后将您提到的脚本添加到包中以单独运行原理图测试。现在看来可以了。

以下是我如何让它工作的明细，以防对其他人有所帮助：github.com/angular/angular-cli/issues/…