Angular CLI - How to pick up .spec.ts files outside of the src folder?

Question

I have an Angular CLI project with a NgModule located outside of the /src folder (eventually this NgModule will be packaged as a npm module but for now I'm just leaving it outside of /src).

I'm trying to write unit tests for this NgModule but ng test doesn't seem to pick up .spec.ts files outside of the /src folder.

I have tried altering the path in /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$/);

But I get an error: Module build failed: Error: /absolute/path/to/file.spec.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

I have also tried adding the path to my NgModule in the include property of tsconfig.spec.json:

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

But no success. Any ideas?

Solvent

Answer 1

In tsconfig.spec.json

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

In test.ts

if you pick parent dir it picks the other specs as well, hence when picking the parent dir of src then give your component name or specify the exact path of your spec

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

When you are in the parent folder of src the same context is picking up the files which are in node_modules,hence we need to mention the spec.ts name.

spec.ts files which are in src will run like before

app spec is in parent of src and game spec in is in src folder

If you want to specify only the root directory and from there you want to pick all the spec files then we give a different naming convention which differs from the spec files in node_modules. Say which are out of src as yourapp.componentout.spec.ts and which are inside insideapp.componentin.spec.ts and you can give one path instead of two directories

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

or the other way follow the naming convention for the files which are outside of src only and put

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

if you don't want to change the spec file names , then give the path of your module location instead of its parent where you can skip the node_modules part.

Basically, We can change the below according to our needs

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

Hope this helps !!!

Ref: https://webpack.js.org/guides/dependency-management/#require-context

Shirashirah

Great answer! I would never have thought of additional context's in tests.ts, I havn't seen documentation around this anywhere. Thanks a lot for posting – Topside

:) Thank you! i am glad that it helped you :) – Shirashirah

What noticed is that you cannot use variables in require.context, as it seems that webpack parses it rather than interprete it?! – Okapi

Thanks a lot for posting, this is what I was searching for exactly – Kartis

Answer 2

The following command will help

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

Fidele