Tests using web-test-runner fail on multi project apps

[Draginfable]

Command

test

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

If you create a new angular app with two projects, and try to run the unit tests using web-test-runner, the spec files cannot be located.

Minimal Reproduction

• Create a new angular app with two projects.

ng new my-workspace --no-create-application
cd my-workspace
ng generate application my-app
ng generate application my-app2

• Use the web-test-runner
  npm install @web/test-runner -D
  Replace @angular-devkit/build-angular:karma by @angular-devkit/build-angular:web-test-runner in angular.json

• Rune the unit tests
  ng test

Exception or Error

NOTE: The Web Test Runner builder is currently EXPERIMENTAL and not ready for production use.
The 'assets' option is not yet supported by this builder.
The 'styles' option is not yet supported by this builder.
The 'inlineStyleLanguage' option is not yet supported by this builder.
The 'stylePreprocessorOptions' option is not yet supported by this builder.
The 'sourceMap' option is not yet supported by this builder.
The 'progress' option is not yet supported by this builder.
The 'preserveSymlinks' option is not yet supported by this builder.
Application bundle generation failed. [2.082 seconds]

✘ [ERROR] File 'projects/my-app/src/app/app.component.spec.ts' is missing from the TypeScript compilation. [plugin angular-compiler]

  Ensure the file is part of the TypeScript program via the 'files' or 'include' property.

Your Environment

Angular CLI: 18.2.1
Node: 18.20.4
Package Manager: npm 10.7.0
OS: linux x64

Angular: 18.2.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.1
@angular-devkit/build-angular   18.2.1
@angular-devkit/core            18.2.1
@angular-devkit/schematics      18.2.1
@angular/cli                    18.2.1
@schematics/angular             18.2.1
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.10

Anything else relevant?

No response

[hekod777]

We are facing the same issue for a monorepo project.

here is the folder structure

workspace
|-- projects
| |-- scopeA
| | |-- lib1
| | | |-- tsconfig.spec.json
| | | |-- src
| | | |-- lib
| | | |-- lib1.component.spec.ts
| | |--lib2
| | |-- tsconfig.spec.json
| | |-- src
| | |-- lib
| | |-- lib2.component.spec.ts
| |-- app
| | |-- tsconfig.spec.json

This is what i found regarding this issue.

When I am running ng test, it will grab tsconfig.spec.json from one of the libs folder. And then apply the settings in the tsconfig.spec.json on all the .spec.ts files in the whole workspace folder. Because the tsconfig.spec.json only includes the spec.ts files in its folder, that's why we are getting File 'projects/my-app/src/app/app.component.spec.ts' is missing from the TypeScript compilation. [plugin angular-compiler] error

When I am running ng test @scopeA/lib1, it will grab the tsconfig.spec.json from projects/scopeA/lib1. but it will also grab all the .spec.ts files from all the folders in workspace folder. like lib1.component.spec.ts, lib2.component.spec.ts. since the tsconfig.spec.json is not including the spec.ts files from lib2. it's throwing the same error.

When running ng test, it should fetch tsconfig options for each library, instead of 1 tsconfig options for all the libraries. The issue is at angular-cli/packages/angular-devkit/build_angular/src/builders/web-test-runner/index.ts line 45 const options = normalizeOptions(schema);

When running ng test @scopeA/lib1, the issue is at angular-cli/packages/angular_devkit/build_angular/src/builders/web-test-runner/index.ts line 52 findTestFiles(options.include, options.exclude, ctx.workspaceRoot)
the folder it should be searching for test files inside ./workspace/projects/scopeA/lib1 instead of ./workspace. ctx.workspaceRoot is incorrect here

Hopefully these findings can speed up the fix of this issue.

PS1: I tried to fix the issue, and it was able to pick up the correct tsconfig and test files. but the build failed. and there is insufficient details on the build failed error. Thus I was not able to dig further.

PS2: if you wanna try out web-test-runner without waiting for a patch, you can modify the include property in scopeA/lib1/tsconfig.spec.ts like this

"include": [
	"**/*.spec.ts",
	"**/*.d.ts",

	"../**/*.spec.ts",
	"../**/*.d.ts",
	"../../**/*.spec.ts",
	"../../**/*.d.ts"
] 

and run ng test @scopeA/lib1, it should run the tests against all the test files in projects folder without the error.