Standalone components are nearly impossible to shallow test

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

Yes

Description

Why Shallow

Before standalone components, it was possible to shallow test components meaning testing a component without loading all of its children (though, we can really exceptionally load some of them). This is interesting for multiple reasons:

• isolation and reduction of System Under Test’s size
• TDD: testing a component based on child components that are not implemented yet (but where the contract is already defined, i.e. inputs/outputs)
• optimizing test performance as we don’t have to load children, grand-children, dependencies etc…

How to Shallow

Usual form of Shallow

To achieve shallow testing, one could create the component this way:

  TestBed.configureTestingModule({
    declarations: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA], // or NO_ERROR_SCHEMA when using directives
  });

  const fixture = TestBed.createComponent(AppComponent);

Rare form of Shallow

or also this rare form:

  TestBed.configureTestingModule({
    declarations: [AppComponent, ChildAComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA], // or NO_ERROR_SCHEMA when using directives
  });

  const fixture = TestBed.createComponent(AppComponent);

where we are also loading the child ChildAComponent but not ChildBComponent or ChildAComponent’s children. This is a really rare use case where we are enlarging the size of the System Under Test a bit. I am covering this here because if we find a solution for this issue, it has to be compatible with this second use case too. Even though it should be super rare.

The Problem

The issue with Standalone Components is that we can’t do this anymore because declaring the component in the test bed’s module, doesn’t work producing the following error:

Please provide a link to a minimal reproduction of the bug

https://github.com/yjaaidi/ng-experiments/blob/angular-standalone-shallow-testing-issue/src/app/app.component.spec.ts

Please provide the exception or error you saw

Error: Unexpected "AppComponent" declaration in "DynamicTestModule" NgModule. "AppComponent" is marked as standalone and can't be declared in any NgModule - did you intend to import it?
            at verifySemanticsOfNgModuleDef (node_modules/@angular/core/fesm2020/core.mjs:24462:15)
            at Function.get (node_modules/@angular/core/fesm2020/core.mjs:24388:21)
            at R3TestBedCompiler.applyProviderOverridesToModule (node_modules/@angular/core/fesm2020/testing.mjs:1084:39)
            at R3TestBedCompiler.compileTestModule (node_modules/@angular/core/fesm2020/testing.mjs:1351:14)
            at R3TestBedCompiler.finalize (node_modules/@angular/core/fesm2020/testing.mjs:935:14)
            at TestBedRender3.testModuleRef (node_modules/@angular/core/fesm2020/testing.mjs:1858:49)
            at TestBedRender3.inject (node_modules/@angular/core/fesm2020/testing.mjs:1781:29)
            at TestBedRender3.createComponent (node_modules/@angular/core/fesm2020/testing.mjs:1821:44)
            at Function.createComponent (node_modules/@angular/core/fesm2020/testing.mjs:1660:37)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.0.0-rc.1
Node: 16.14.0
Package Manager: yarn 1.22.11 
OS: darwin x64

Angular: 14.0.0-rc.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.0-rc.1
@angular-devkit/build-angular   14.0.0-rc.1
@angular-devkit/core            14.0.0-rc.1
@angular-devkit/schematics      14.0.0-rc.1
@schematics/angular             14.0.0-rc.1
rxjs                            7.5.5
typescript                      4.6.4

Anything else?

The main alternative I can quickly think of is some internal option that allows module to declare a standalone component in a module.

This internal option should be set by TestBed.configureTestingModule():

1. by default but this will not signal invalid declarations of standalone components for users who meant importing the standalone component.
2. behind an explicit option TestBed.configureTestingModule({allowStandaloneDeclaration: true}) DX wouldn’t be great but can easily wrapped by commonly use shallow testing functions or libraries.

[pkozlowski-opensource]

Agree with the possibility of API improvements. As I’ve mentioned we are planning to review TestBed APIs for standalone post-v14. Same goes for the documentation: in v14 standalone APIs are open for experimentation as developer preview. We will adjust the documentation past v14 based on the community feedback.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}