entryComponents required in tests

[pburkindine]

We are having to declare entryComponents in tests after upgrading to A9; the documentation indicates this should not be necessary

@NgModule({
  entryComponents: [
    xyz,
  ]
})
export class ImportModule {}

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule, ImportModule],
...

[pacocom]

I have the same problems!!!

[pburkindine]

The entryComponents in question are all present in the declarations in the TestBed btw

[AndrewKushnir]

Hi @pburkindine, could you please provide a minimum repro (in a form of GitHub repo), so that we can perform further investigation? Thank you.

[pacocom]

Hello!

I have a example:

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';
import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ActivatedRoute } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { SharedModule } from '@shared';
import { CommonTermsModule } from '@shared-components';
import { DownloadUserDataComponent } from '../download-user-data';
import { DownloadModalComponent } from './download-modal.component';

const mockActivatedRoute = {
  parent: {},
};

describe('DownloadModalComponent', () => {
  let component: DownloadModalComponent;
  let fixture: ComponentFixture<DownloadModalComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [DownloadModalComponent, DownloadUserDataComponent],
      imports: [
        NoopAnimationsModule,
        RouterTestingModule,
        HttpClientTestingModule,
        MatBottomSheetModule,
        SharedModule,
        CommonTermsModule,
        ReactiveFormsModule,
        FormsModule,
      ],
      providers: [{ provide: ActivatedRoute, useValue: mockActivatedRoute }, { provide: MatBottomSheetRef }],
    })
      // TODO: Remove next line when we know how Angular 9 test entryComponents
      // IF I REMOVE THIS LINE TEST BREAK
      .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [DownloadUserDataComponent] } })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DownloadModalComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

If I remove next line test ERROR!
.overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [DownloadUserDataComponent] } })

Thank!

[AndrewKushnir]

Hi @pacocom, thanks for additional information.

Could you please create a GitHub repo with a minimum possible repro (I assume some of the modules in imports section and providers may not affect), so that we can perform further investigation?

I also want to confirm if you use Ivy to reproduce the problem (looks like the error message was produced by View Engine)?

Thank you.

[pburkindine]

@AndrewKushnir I have not had time this work week but I will try to repro this weekend; I wanted to make sure it was on the books

[archasek]

Hi @AndrewKushnir, I guess I have a similar problem here.

The app works ok without entryComponents, but tests don't.

https://github.com/archasek/angular-playground

Crucial line: https://github.com/archasek/angular-playground/blob/master/src/app/app.component.spec.ts#L32

Just run tests with npm test.

Thanks

[AndrewKushnir]

Hi @archasek, thanks for the repository with the setup that triggers the issue.

I checked error logs and found out that ViewEngine is used to run the tests and that's the reason why entryComponent issue happens. I looked at the package.json file and found out that you configured your project to use Jest and it looks like additional configuration might be required.

I'm transferring this issue to Angular CLI repo for further investigation.

Thank you.

[alan-agius4]

Hi, the problem with Jest is that it doesn't use @ngtools/webpack to bundle and resolve the packages but rather rely on Node.Js resolutions. These modules are not being transformed using NGCC and thus modules are resolved to their VE version.

You will need to run ngcc manually as a postinstall hook so that all modules are transformed to be Ivy compatible.

"postinstall": "ngcc --properties main"

[archasek]

@alan-agius4 thanks so much, works like a charm for a demo repo.
Thanks @AndrewKushnir !

Btw. for those who are experiencing errors with $localize() in Jest tests after this change: thymikee/jest-preset-angular#347 (comment)