Getting reference error when moving Angular 4 test files to a custom folder?

Question

In an angular 4 project (karma & Jasmin as ), I want to keep test files in a custom test folder (instead of the respective component folder).

Here is the default folder structure.

I want to move all "*.spec.ts" file inside test folder (which I created and might have some kind of folder structure inside it)

When I move the app.component.specs.ts/or any other specs.ts to "test" folder, they are not getting detected (because of path declaration in test.ts and tsconfig.specs.json).

here is 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();

and here is 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"
  ]
}

if I change the context declaration to this and even move only app.component.spec.ts the .specs.ts files to test folder, I got the below error.

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

Here is the app.spec.ts (after moving it to custom "test" folder)

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'}
  ];

Can you please show some lights on how to achieve this?

Update : After adding a new context like this

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

migration of app.conponent.spec.ts work as desired, but when I move the other component specifc test.spec.ts file and add a new context like this,

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

The moved file does not get picked. Also added this

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

to tsconfig.specs.json.

As far as I remember you need to add a second context because your test folder is a folder above the test.ts. Maybe have a look here: https://stackoverflow.com/questions/47364840/angular-cli-how-to-pick-up-spec-ts-files-outside-of-the-src-folder — Erbsenkoenig, Jul 26 '19 at 07:37
@Erbsenkoenig : as per that question I have added new context const context1 = require.context('../', true, /app\.component\.spec\.ts$/); it worked for app.component.spec.ts but when I move other files it is not picking other files because the new context refers to app.component.ts only. How to refer to all files moved to that folder ? — Talk is Cheap Show me Code, Jul 26 '19 at 08:14
The last param is a regex. With adding ```/app\.component\.spec\.ts$/``` you only select the app.component. Please try ```const context2 = require.context('../', true, /\.spec\.ts$/);//``` — Erbsenkoenig, Jul 26 '19 at 12:07
is the first parameter correct to use as '../' ? or we need to specify exact '../test/' ?? — Talk is Cheap Show me Code, Jul 26 '19 at 12:12
In your case ```../test/``` should be sufficient since you want to put all those files there. — Erbsenkoenig, Jul 26 '19 at 12:13
@Erbsenkoenig: Hi that's working very fine. Thanks a lot. There is one small change I needed to do. Once I update the question. you can add it as the true answer. Also if possible explaining why I needed to change the reference! Thanks :-) — Talk is Cheap Show me Code, Jul 26 '19 at 12:40
Does this answer your question? [Angular CLI - How to pick up .spec.ts files outside of the src folder?](https://stackoverflow.com/questions/47364840/angular-cli-how-to-pick-up-spec-ts-files-outside-of-the-src-folder) — Liam, Jul 07 '20 at 08:34

score 1 · Answer 1 · answered Jul 26 '19 at 13:03

The tests inside your test folder are not taken into account because per default the test configuration is setup, so that all .spec.ts files inside the directory and all subdirectories of the test.ts are taken into account.

Your attempt with changing the context goes into the right direction. But it seems like the context is as well necessary to tell where the actual implementation is to be found. This is why you are getting those errors that the module was not found.

You need to add a second context to the existing one, like this:

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

From the documentation:

require.context('./test', false, /.test.js$/); // a context with files from the test directory that can be required with a request endings with .test.js.

Here is another similar stack overflow question

Getting reference error when moving Angular 4 test files to a custom folder?

1 Answers1