How to diagnose root cause of Angular error NG05104, "Root element was not found during...

I am working on a large Angular project, currently on Angular 17. It uses jest for unit tests, of which there are currently few. I am working to fix that. I find that as the test suites get big and complex, they get fragile and flaky, and at some point I will add a new test case and have it fail with a message like (chopping the stack trace when it hits my test suite)

NG05104: The selector "#root4" did not match any elements. Find more at https://angular.io/errors/NG05104

● OncCustomizedReportComponent › should define radioStart and set paramsLabel

NG05104: The selector "#root4" did not match any elements. Find more at https://angular.io/errors/NG05104

78 |
79 | beforeEach(() => {
> 80 | fixture = TestBed.createComponent(OncCustomizedReportComponent);
| ^
81 | component = fixture.componentInstance;
82 |
83 | component.rContainer = {


at DefaultDomRenderer2.selectRootElement (../../node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:573:19)
at locateHostElement (../../node_modules/@angular/core/fesm2022/core.mjs:10934:34)
at ComponentFactory.create (../../node_modules/@angular/core/fesm2022/core.mjs:15348:17)
at initComponent (../../node_modules/@angular/core/fesm2022/testing.mjs:1975:51)
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../node_modules/zone.js/bundles/zone.umd.js:411:30)
at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (../../node_modules/zone.js/bundles/zone-testing.umd.js:300:43)
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../node_modules/zone.js/bundles/zone.umd.js:410:56)
at Object.onInvoke (../../node_modules/@angular/core/fesm2022/core.mjs:14424:33)
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../node_modules/zone.js/bundles/zone.umd.js:410:56)
at Zone.Object.<anonymous>.Zone.run (../../node_modules/zone.js/bundles/zone.umd.js:166:47)
at NgZone.run (../../node_modules/@angular/core/fesm2022/core.mjs:14275:28)
at _TestBedImpl.createComponent (../../node_modules/@angular/core/fesm2022/testing.mjs:1986:41)
at Function.createComponent (../../node_modules/@angular/core/fesm2022/testing.mjs:1779:37)
at src/lib/reports/oncology/onc-customized-report/onc-customized-report.component.spec.ts:80:23


I can run this test case in isolation (using the JestRunner VSCode extension) and it works as expected. But when I try to run the whole test suite (either with the VSCode extension, or with a command like

npm run jest -- --ci --passWithNoTests --config projects/otm/jest.config.ts --changedSince=origin/development --coverage


it fails with the incomprehensible error.

And this test file seems to have as many tests in it as it can take, with 4 tests. I've tried to add more tests for various parts of the component and they all fail with this message about "The selector #root$NUMBER" ($NUMBER increments with the number of tests I add). Different components/services seem to be able to have tests with varying levels of complexity before they run into this problem, but I'm not able to just keep adding tests to anything that I've started without eventually running into this. Plausibly there is something I am Doing Wrong with the test setup, but what could it be?

Yes, I looked at https://v17.angular.io/errors/NG05104, and I cannot see how it possibly applies. Yes, I looked at all of the possibly related questions. No, I cannot post my employer's IP, so I will not subject you to the 400-some line component or the 140-some lines of test.

Does anybody have any suggestions?

Thanks in advance.

Continue reading...