将 Angular 4 测试文件移动到自定义文件夹时出现参考错误？答案

【问题标题】：Getting reference error when moving Angular 4 test files to a custom folder?将 Angular 4 测试文件移动到自定义文件夹时出现参考错误？
【发布时间】：2019-07-26 07:31:33
【问题描述】：

在 Angular 4 项目（karma & Jasmin as）中，我想将测试文件保存在自定义测试文件夹（而不是相应的组件文件夹）中。

这是默认的文件夹结构。

我想将所有“*.spec.ts”文件移动到测试文件夹中（我创建的并且其中可能有某种文件夹结构）

当我将 app.component.specs.ts/或任何其他 specs.ts 移动到“test”文件夹时，它们没有被检测到（因为 test.ts 和 tsconfig.specs.json 中的路径声明）。

这里是 test.ts

declare const __karma__: any;
declare const require: any;

__karma__.loaded = function () {};

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
)

// This need to be modified but dont know how
const context = require.context('./', true, /\.spec\.ts$/);


context.keys().map(context);
__karma__.start();

这里是 tsconfig.specs.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

如果我将上下文声明更改为此，甚至仅将 app.component.spec.ts 和 .specs.ts 文件移动到测试文件夹，我会收到以下错误。

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

这是 app.spec.ts（将其移至自定义“测试”文件夹后）

import { QuoteTextComponent } from '../src/app/components/quote-text/quote-text.component';
import { TestBed, async } from '@angular/core/testing';
import { APP_BASE_HREF } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from '../src/app/app.component';
import { HomeComponent } from '../src/app/components/home/home.component';
import { AboutComponent } from '../src/app/components/about/about.component';

describe('AppComponent', () => {
  const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: '', redirectTo: '/home', pathMatch: 'full'}
  ];

您能否介绍一下如何实现这一目标？

更新：添加这样的新上下文后

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

app.conponent.spec.ts 的迁移按需要工作，但是当我移动其他组件特定的 test.spec.ts 文件并添加这样的新上下文时，

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

移动的文件没有被选中。还加了这个

"./test/*.spec.ts",

到 tsconfig.specs.json。

【问题讨论】：

据我记得您需要添加第二个上下文，因为您的测试文件夹是 test.ts 上方的文件夹。也许看看这里：stackoverflow.com/questions/47364840/…
@Erbsenkoenig：根据那个问题，我添加了新的上下文 const context1 = require.context('../', true, /app\.component\.spec\.ts$/);它适用于 app.component.spec.ts 但是当我移动其他文件时它不会选择其他文件，因为新上下文仅引用 app.component.ts 。如何引用移动到该文件夹的所有文件？
最后一个参数是一个正则表达式。添加 /app\.component\.spec\.ts$/ 后，您只需选择 app.component。请尝试const context2 = require.context('../', true, /\.spec\.ts$/);//
第一个参数是否正确用作'../'？或者我们需要指定确切的 '../test/' ??
在你的情况下../test/ 应该足够了，因为你想把所有这些文件放在那里。

标签： angular typescript unit-testing jasmine karma-jasmine

【解决方案1】：

不考虑test 文件夹中的测试，因为默认情况下会设置测试配置，因此会考虑目录中的所有.spec.ts 文件和test.ts 的所有子目录。

您更改上下文的尝试朝着正确的方向发展。但似乎上下文也有必要告诉在哪里找到实际的实现。这就是为什么您会收到那些找不到模块的错误。

您需要在现有上下文中添加第二个上下文，如下所示：

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

来自documentation：

require.context('./test', false, /.test.js$/); // 包含来自测试目录的文件的上下文，请求以.test.js 结尾时可能需要这些文件。

这是另一个similar stack overflow question

【讨论】：