Adding Vitest to Angular app results in NullInjectorError: No provider for TestComponentRenderer!

[redzimskidev]

Please provide the environment you discovered this bug in.

I can't reproduce it - I've run the same commands on codesandbox.io and it works fine there. However, I tried creating a new Angular app and running the same app on a different machine and both resulted in issues.

On two machines I own, running ng new, adding Vitest as documented and fixing the issues mentioned in the description result in the error in the title.

Which area/package is the issue in?

Don't know / other

Description

I can't reproduce it - I've run the same commands on codesandbox.io and it works fine there. However, I tried creating a new Angular app and running the same app on a different machine and both resulted in issues.

Two issues I encountered running the commands: ng g @analogjs/platform:setup-vitest --project [your-project-name] adds vitest 1.31.1 to package.json which can't be installed because this version doesn't exist. I assumed it was meant to be 1.3.1, after changing and running npm i I get an error about not being able to use ESBuild modules - I might remember wrong, but the solution was to change extension of vite.config from ts to mts. Those errors also happened on codesandbox so they probably don't cause my issue.

It's probably more of a question than a bug since I know the code works on codesandbox, but I have no idea whatsoever what causes it to fail on my machines.

Please provide the exception or error you saw

C:\repos\app\asd [feature-frontend-skeleton ≡ +1 ~2 -0 !]> npm run test --verbose
npm verb cli C:\Program Files\nodejs\node.exe C:\Users\***\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js
npm info using npm@10.5.0
npm info using node@v20.11.1
npm verb title npm run test
npm verb argv "run" "test" "--loglevel" "verbose"
npm verb logfile logs-max:10 dir:C:\Users\***\AppData\Local\npm-cache\_logs\2024-03-18T19_11_57_493Z-
npm verb logfile C:\Users\***\AppData\Local\npm-cache\_logs\2024-03-18T19_11_57_493Z-debug-0.log

> asd@0.0.0 test
> ng test


 DEV  v1.4.0 C:/repos/app/asd

 ❯ src/app/app.component.spec.ts (1)
   ❯ AppComponent (1)
     × should create the app
       \ [ afterEach ]

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/app/app.component.spec.ts > AppComponent > should create the app
NullInjectorError: R3InjectorError[TestComponentRenderer -> TestComponentRenderer]: 
  NullInjectorError: No provider for TestComponentRenderer!
 ❯ NullInjector.get ../../app/asd/node_modules/@angular/core/fesm2022/core.mjs:1654:27
 ❯ R3Injector.get ../../app/asd/node_modules/@angular/core/fesm2022/core.mjs:3093:33
 ❯ R3Injector.get ../../app/asd/node_modules/@angular/core/fesm2022/core.mjs:3093:33
 ❯ TestBedImpl.inject ../../packages/core/testing/src/test_bed.ts:548:58
 ❯ TestBedImpl.createComponent ../../packages/core/testing/src/test_bed.ts:618:40
 ❯ Function.createComponent ../../packages/core/testing/src/test_bed.ts:366:33
 ❯ src/app/app.component.spec.ts:11:33
      9|   });
     10| 
     11|   it('should create the app', () => {
       |                                 ^
     12|     const fixture = TestBed.createComponent(AppComponent);
     13|     const app = fixture.componentInstance;
 ❯ _ZoneDelegate.invoke node_modules/zone.js/fesm2015/zone.js:368:26
 ❯ ProxyZoneSpec.onInvoke node_modules/zone.js/fesm2015/zone-testing.js:273:39
 ❯ _ZoneDelegate.invoke node_modules/zone.js/fesm2015/zone.js:367:52

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { ngTempTokenPath: null, ngTokenPath: [ 'TestComponentRenderer', 'TestComponentRenderer' ] } 
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/2]⎯

 FAIL  src/app/app.component.spec.ts > AppComponent > should create the app
NullInjectorError: R3InjectorError[TestComponentRenderer -> TestComponentRenderer]: 
  NullInjectorError: No provider for TestComponentRenderer!
 ❯ NullInjector.get ../../app/asd/node_modules/@angular/core/fesm2022/core.mjs:1654:27
 ❯ R3Injector.get ../../app/asd/node_modules/@angular/core/fesm2022/core.mjs:3093:33
 ❯ R3Injector.get ../../app/asd/node_modules/@angular/core/fesm2022/core.mjs:3093:33
 ❯ TestBedImpl.inject ../../packages/core/testing/src/test_bed.ts:548:58
 ❯ TestBedImpl.tearDownTestingModule ../../packages/core/testing/src/test_bed.ts:771:31
 ❯ TestBedImpl.resetTestingModule ../../packages/core/testing/src/test_bed.ts:479:16
 ❯ ../../packages/core/testing/src/test_hooks.ts:34:15
 ❯ _ZoneDelegate.invoke node_modules/zone.js/fesm2015/zone.js:368:26
 ❯ ProxyZoneSpec.onInvoke node_modules/zone.js/fesm2015/zone-testing.js:273:39
 ❯ _ZoneDelegate.invoke node_modules/zone.js/fesm2015/zone.js:367:52

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { ngTempTokenPath: null, ngTokenPath: [ 'TestComponentRenderer', 'TestComponentRenderer' ] } 
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/2]⎯

 Test Files  1 failed (1)
      Tests  1 failed (1)
   Start at  20:11:59
   Duration  1.48s (transform 215ms, setup 409ms, collect 184ms, tests 90ms, environment 466ms, prepare 638ms) 


 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[brandonroberts]

Not sure what's going on here because there is a 1.3.1 version of Vitest

https://www.npmjs.com/package/vitest?activeTab=versions

[brandonroberts]

Ahh, I see the issue. We add an incorrect version to the package.json

https://github.com/analogjs/analog/blob/beta/packages/nx-plugin/src/generators/setup-vitest/versions/ng_17_X/versions.ts#L8 should be ^1.3.1

[brandonroberts]

If you can share the test repo that would help. I'm able to run the tests after adjusting the version and changing vite.config.ts to vite.config.mts

npx @angular/cli@latest new angular-analog-vitest
cd angular-analog-vitest
npm i @analogjs/platform --save-dev
ng g @analogjs/platform:setup-vitest --project angular-analog-vitest
(Update package.json to ^1.3.1 after npm install error)
npm i
Rename vite.config.ts to vite.config.mts
npm run test

[redzimskidev]

HI @brandonroberts, thank you for quick reply.

I found the issue and it's a weird one - it fails only when there are spaces in the project's path. I have spaces in the name of my repository, so it failed there, and when I created an app called analog-vitest-error-repro it failed. When I rename the directory to analog vitest error repro it's failing with the same issue my repository does. Here's a repository with a folder with spaces:
https://github.com/redzimskidev/analog-vitest-error-repro

I tried recreating the bug with github actions but it seems spaces break that too(or I can't figure it out).

[brandonroberts]

I see, that is weird. We fixed the issues with running the schematic, but that wouldn't resolve this.