Unit test should fail if an element is not known

🚀 Unit test should fail if an element is not known

Relevant Package

This feature request is for @angular/core. And I think this is a kinda a regression since this behavior changed with Ivy.

Description

When executing unit tests with Karma and my test module has not been setup correctly, to contain all the relevant components, I get a warning like this:

WARN: ''app-my-element' is not a known element:
1. If 'app-my-element' is an Angular component, then verify that it is part of this module.
2. If 'app-my-element' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'

The test is still successful in that case. In my opinion it should fail, since the test module clearly is missing this component.

I saw that there have been efforts to make it appear as an error: 00f3c58. This has been reverted in this commit: 00f3c58.

But that wouldn’t change the fact, that the test still passes.

Describe the solution you’d like

I would like one of these options:

• tests with unknown elements fail (as they did pre Ivy)
• an option to enable this behavior to make the tests fail
  • i.e. a CLI argument or a property in angular.json

If the default is “fail”, then a user could add CUSTOM_ELEMENTS_SCHEMA or NO_ERRORS_SCHEMA to their test module if they want to suppress the errors.

[cexbrayat]

We landed two PRs that introduce new options for the TestBed in Angular v14 and that should fix this issue.

You can now enable errorOnUnknownElements and/or errorOnUnknownProperties when setting up the TestBed globally or in a specific test to throw an error on unknown elements or unknown properties encountered in templates (instead of just logging the NG303/NG304 error).

These new options are opt-in for now.

If you’re using the CLI, you can enable them globally in test.ts

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
  { 
    errorOnUnknownElements: true,
    errorOnUnknownProperties: true
  }
);

Or you can enable/disable them in a specific test:

TestBed.configureTestingModule({
  declarations: [AppComponent],
  errorOnUnknownElements: true, 
  errorOnUnknownProperties: false
})

See https://next.angular.io/api/core/testing/TestModuleMetadata

[eegeeZA]

For a workaround, I have added the code below to the end of our src/test.ts file.

// https://github.com/angular/angular/issues/36430
// eslint-disable-next-line @typescript-eslint/no-explicit-any
console.error = (data: any) => fail(data);