Can't test using Angular testing modules

[xndyz]

Currently unable to test a custom component which renders the ngx-echarts component. It's not recognizing the directives despite importing the directive to the TestBed, nor does it skip when using NO_ERRORS_SCHEMA.

It gives Can't bind to ___ since it isn't a known property of 'div' errors for each eCharts attribute used in the template file.

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [GridMixChartComponent],
      imports: [
        HttpClientTestingModule,
        CommonModule,
        TranslateModule.forRoot(),
        NgxEchartsModule.forRoot({
          /**
           * This will import all modules from echarts.
           * If you only need custom modules,
           * please refer to [Custom Build] section.
           */
          echarts: () => import('echarts'), // or import('./path-to-my-custom-echarts')
        }),
      ],
      providers: [
        { provide: GridMixService, useClass: mockGridMixService },
        { provide: AppStore, useClass: mockAppStore },
      ],
      schemas: [NO_ERRORS_SCHEMA],
    }).compileComponents();
  });

[Neizan93]

Similar issue, but my problem is:

ng serve: OK
ng build: OK

ng test: FAILS
(using jest)

"echarts": "^5.4.1"
"ngx-echarts": "^8.0.1"

note: Tested on a karma+jasmine proyect without errors.
Seems to be an error with Jest and it is a different error (opening new thread...)

[edilson14]

@Neizan93 orr @Fandy
does any one find the problem ?
ng test fails here to :/

[Pechoquintas]

You can try the following, it worked for me, remove NgxEchartsModule from the imports section, and add the following in the providers.

providers: [
  ...(NgxEchartsModule.forRoot({
    echarts: async () => {
      const echarts = await import('echarts');
      return echarts;
    },
  }).providers || []),
],
schemas: [NO_ERRORS_SCHEMA]