Angular CLI - 如何在 src 文件夹之外获取 .spec.ts 文件？

Question

我有一个用Angular CLI创建的项目，其中有一个NgModule位于/src文件夹之外（最终这个NgModule将被打包为npm模块，但现在我只是把它放在了/src之外）。

我试图为这个NgModule编写单元测试，但是ng test似乎没有找到/src之外的.spec.ts文件。

我尝试在/src/test.ts中修改路径：

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

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

// Does not work
const context = require.context('/absolute/path/to/ngmodule', true, /\.spec\.ts$/);

但是我收到了一个错误： 模块构建失败：错误：/绝对路径/to/file.spec.ts不是编译的一部分。请确保它通过“files”或“include”属性在您的tsconfig中。

我还尝试将路径添加到我的NgModule中，在tsconfig.spec.json的include属性中：

"include": [
  "../my-ng-module/**/*.spec.ts",  // Added this
  "**/*.spec.ts",
  "**/*.d.ts"
]

但是没有成功。 有什么想法吗？

- AngularChef

Answer 1

在tsconfig.spec.json文件中

 "include": [
    "../*.spec.ts", // your spec file location parent of src or ../yourpath/
    "**/*.spec.ts",
    "**/*.d.ts"
  ] 

在 test.ts 中

如果你选择了父目录，它也会选择其他的规范，因此当选择 src 的父目录时，请给出你的组件名称或指定你规范的精确路径。

 const context1 = require.context('./', true, /\.spec\.ts$/);//
 const context = require.context('../', true, /app\.component\.spec\.ts$/);//
 context.keys().map(context);
 context1.keys().map(context1);

当您在src的父文件夹中时，相同的上下文会获取在node_modules中的文件，因此我们需要指定spec.ts名称。

与之前一样，src中的spec.ts文件将正常运行。

app spec位于src的父目录中，而game spec位于src文件夹中

如果您想仅指定根目录，然后从那里选择所有spec文件，则我们给出一个不同的命名约定，该约定与node_modules中的spec文件不同。比如说，对于不在src外的文件，可以命名为yourapp.componentout.spec.ts，而在insideapp.componentin.spec.ts中的文件则可以在一个路径中指定，而不是使用两个目录

const context = require.context('../', true, /out\.spec\.ts$|in\.spec\.ts$/);//
context.keys().map(context);

或者另一种方法是遵循命名约定，仅针对 src 之外的文件，并放置

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

如果您不想更改规范文件名称，则可以提供模块位置的路径，而不是其父级路径，从而可以跳过"node_modules"部分。

基本上，我们可以根据自己的需求进行以下更改。

  require.context(directory, useSubdirectories = false, regExp = /^\.\//)

希望这可以帮到你 !!! 参考: https://webpack.js.org/guides/dependency-management/#require-context

- Ampati Hareesh

---

太棒了！我从来没有想到在 tests.ts 中添加额外的上下文，我在任何地方都没有看到过这方面的文档。非常感谢您的发布。 - Drenai

我很高兴它对你有帮助 :) - Ampati Hareesh

我注意到的是，你不能在require.context中使用变量，因为似乎webpack会解析它而不是解释它？！ - mPrinC

非常感谢您的发布，这正是我一直在寻找的。 - wael jawadi

Answer 2

以下命令将有所帮助

ng test --include='src/app/modulefolder/**/*.spec.ts'

- Venkatesh Muniyandi