CODEWITHSUNDEEP
angulartypescriptunit-testingjasminekarma-jasmine
Talk is Cheap Show me Code
Talk is Cheap Show me Code

Reputation: 2304

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

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.

enter image description here

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$/);

enter image description here

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.

Upvotes: 1

Views: 889

Answers (1)

Erbsenkoenig
Erbsenkoenig

Reputation: 1659

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

Upvotes: 1

Related Questions