Skip to content

Testing non-standalone components doesn't work when using @angular/build:unit-test with vitest runner #737

@th0r

Description

@th0r

Is this a regression?

No

Description

Starting from Angular v21 CLI creates projects with @angular/build:unit-test test runner which by default uses Vitest as Karma is deprecated.

Looks like @ngneat/spectator has troubles with it: if tested component is not a standalone component then both createComponentFactory and createHostFactory don't import component dependencies from the component's module and all tests fail, showing the corresponding warning in the console:

NG0304: 'app-child-with-module' is not a known element (used in the '_ParentWithModule' component template):
1. If 'app-child-with-module' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'app-child-with-module' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Here is the reproduction repo: https://github.com/th0r/ng-neat-vitest-component-with-module-bug

I've created two similar components there: one with module and a standalone one. Both renders two child components. The spec for standalone component passes, the other one for the moduled component fails.

To run tests use the following command npm i && npx playwright install && npm run test:

Image

Please provide a link to a minimal reproduction of the bug

https://github.com/th0r/ng-neat-vitest-component-with-module-bug

Please provide the exception or error you saw

NG0304: 'app-child-with-module' is not a known element (used in the '_ParentWithModule' component template):
1. If 'app-child-with-module' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'app-child-with-module' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
stderr | src/app/parent-with-module/parent-with-module.spec.ts > ParentWithModule component > renders
NG0304: 'app-child-standalone' is not a known element (used in the '_ParentWithModule' component template):
1. If 'app-child-standalone' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'app-child-standalone' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Please provide the environment you discovered this bug in

Angular CLI       : 21.0.1
Angular           : 21.0.1
Node.js           : 24.8.0
Package Manager   : npm 11.6.0
Operating System  : darwin arm64

┌───────────────────────────────────┬───────────────────┬───────────────────┐
│ Package                           │ Installed Version │ Requested Version │
├───────────────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build                    │ 21.0.1            │ ^21.0.0           │
│ @angular/cli                      │ 21.0.1            │ ^21.0.0           │
│ @angular/common                   │ 21.0.1            │ ^21.0.0           │
│ @angular/compiler                 │ 21.0.1            │ ^21.0.0           │
│ @angular/compiler-cli             │ 21.0.1            │ ^21.0.0           │
│ @angular/core                     │ 21.0.1            │ ^21.0.0           │
│ @angular/forms                    │ 21.0.1            │ ^21.0.0           │
│ @angular/platform-browser         │ 21.0.1            │ ^21.0.0           │
│ @angular/platform-browser-dynamic │ 21.0.1            │ ^21.0.1           │
│ @angular/router                   │ 21.0.1            │ ^21.0.0           │
│ rxjs                              │ 7.8.2             │ ~7.8.0            │
│ typescript                        │ 5.9.3             │ ~5.9.2            │
│ vitest                            │ 4.0.14            │ ^4.0.8            │
│ zone.js                           │ 0.16.0            │ ^0.16.0           │
└───────────────────────────────────┴───────────────────┴───────────────────┘

Anything else?

No response

Do you want to create a pull request?

No

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions