I have an error when run my test with Jest

[jbocchi-bc]

Versions

• Angular version: 14
• component version: "ngx-daterangepicker-material": "^6.0.2",

Describe the bug I use Nx, Angular and Jest and when I run my tests, I have this error:

I have written the jest.config.ts with transformIgnorePatterns: ['node_modules/(?!.*((\\.mjs$))|(dayjs/*))'],

I don't know how to resolve this issue...

[paulhobbel]

Running into the same issue

[MalTarDesigns]

I am also having the same issue at the moment.

[MalTarDesigns]

Fixed this issue by fully mocking ngx-daterangepicker-material.

Here is the mock I used:

import { Component, Directive, ModuleWithProviders, NgModule } from '@angular/core';

@Directive({
  selector: 'input[ngxDaterangepickerMd]',
  providers: []
})
export class DaterangepickerDirective {
}

@Component({
  selector: 'ngx-daterangepicker-material',
  template: '',
})
export class DateRangePickerComponent {
  constructor() {}
}

@NgModule({
  declarations: [DateRangePickerComponent, DaterangepickerDirective],
  exports: [DateRangePickerComponent, DaterangepickerDirective],
})
export class NgxDaterangepickerMd {
  constructor() {}

  static forRoot(): ModuleWithProviders<NgxDaterangepickerMd> {
    return {
      ngModule: NgxDaterangepickerMd,
      providers: []
    };
  }
}

And make sure you add the path to this mock in your root jest config file like this:

  moduleNameMapper: {
    'ngx-daterangepicker-material': 'shared/testing/mocks/ngx-daterangepicker-material-mock.js'
  }

[jbocchi-bc]

Fixed this issue by fully mocking ngx-daterangepicker-material.

Here is the mock I used:

import { Component, Directive, ModuleWithProviders, NgModule } from '@angular/core';

@Directive({
  selector: 'input[ngxDaterangepickerMd]',
  providers: []
})
export class DaterangepickerDirective {
}

@Component({
  selector: 'ngx-daterangepicker-material',
  template: '',
})
export class DateRangePickerComponent {
  constructor() {}
}

@NgModule({
  declarations: [DateRangePickerComponent, DaterangepickerDirective],
  exports: [DateRangePickerComponent, DaterangepickerDirective],
})
export class NgxDaterangepickerMd {
  constructor() {}

  static forRoot(): ModuleWithProviders<NgxDaterangepickerMd> {
    return {
      ngModule: NgxDaterangepickerMd,
      providers: []
    };
  }
}

And make sure you add the path to this mock in your root jest config file like this:

  moduleNameMapper: {
    'ngx-daterangepicker-material': 'shared/testing/mocks/ngx-daterangepicker-material-mock.js'
  }

Hello @MalTarDesigns I have an error with my test and your solution:

describe('DigestFilterComponent', () => {
    let component: DigestFilterComponent;
    let fixture: ComponentFixture<DigestFilterComponent>;
    let reviewFacadeMock: Partial<ReviewFacade>;

    beforeEach(() => {
        reviewFacadeMock = {
            setFilterDateRange: jest.fn(),
        };

        TestBed.overrideComponent(DigestFilterComponent, {
            set: {
                imports: [
                    CommonModule,
                    NgxDaterangepickerMd,
                    MatFormFieldModule,
                    FormsModule,
                    ReactiveFormsModule,
                    MatInputModule,
                ],
                providers: [{ provide: ReviewFacade, useValue: reviewFacadeMock }],
                schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
            },
        });

        fixture = TestBed.createComponent(DigestFilterComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

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

The error is

Error: Unexpected synthetic property @transitionMessages found. Please make sure that:
  - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
  - There is corresponding configuration for the animation named `@transitionMessages` defined in the `animations` field of the `@Component` decorator (see https://angular.io/api/core/Component#animations).

If I add the BrowserAnimationsModule, I have an error :

Error: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.