angular unit testing: element.animate is not a function

I am trying to test mat snackbar. I have following code in my component.ts

snackbarRef: MatSnackBarRef<TextOnlySnackBar>;

constructor(private snackBar: MatSnackBar) {}

onUpdate(){
this.snackbarRef = this.snackBar.open(
`Please select at least one option`,
'Close',
{
panelClass: ['snackbar-failure'],
duration: 5000,
},
);
}


I have following simple code in my test file component.spec.ts

describe('ExampleComponent', () => {
let component: ExampleComponent;
let fixture: ComponentFixture<ExampleComponent>;
let loader: HarnessLoader;

beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ExampleComponent],
imports: [BrowserAnimationsModule, MatSnackBarModule],
providers: [MatSnackBar],
}).compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(ExampleComponent);
component = fixture.componentInstance;

fixture.detectChanges();
loader = TestbedHarnessEnvironment.loader(fixture);
});

it('should should have no snackbar', async () => {
expect(component.snackbarRef).toEqual(undefined);
});
});


Unfortunately above code for testing gives error

TypeError: element.animate is not a function
at WebAnimationsPlayer._triggerWebAnimation (node_modules/@angular/animations/fesm2020/browser.mjs:4442:33)


When searching online, most solutions ask for to include either NoopAnimationsModule or BrowserAnimationsModule. Unfortunately both gives same error.

How can I fix this test?

Continue reading...