My Angular 17 application with Angular Material throws an error when I run ng test
:
Chrome 121.0.0.0 (Linux x86_64) AppComponent should have the 'app-test' title FAILED
Error: NG05105: Unexpected synthetic listener @transform.start found. Please make sure that:
- Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
- There is corresponding configuration for the animation named `@transform.start` defined in the `animations` field of the `@Component` decorator (see https://angular.io/api/core/Component#animations).
error properties: Object({ code: 5105 })
at checkNoSyntheticProp (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:690:15)
at NoneEncapsulationDomRenderer.listen (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:652:13)
at listenerInternal (node_modules/@angular/core/fesm2022/core.mjs:24662:40)
at Module.ɵɵsyntheticHostListener (node_modules/@angular/core/fesm2022/core.mjs:24573:5)
at superHostBindings (node_modules/@angular/material/fesm2022/sidenav.mjs:74:110)
at Object.hostBindings (node_modules/@angular/core/fesm2022/core.mjs:15937:13)
at invokeHostBindingsInCreationMode (node_modules/@angular/core/fesm2022/core.mjs:12939:13)
at invokeDirectivesHostBindings (node_modules/@angular/core/fesm2022/core.mjs:12922:17)
at createDirectivesInstances (node_modules/@angular/core/fesm2022/core.mjs:12300:9)
at ɵɵelementStart (node_modules/@angular/core/fesm2022/core.mjs:22153:9)
Chrome 121.0.0.0 (Linux x86_64) AppComponent should render title FAILED
Error: NG05105: Unexpected synthetic listener @transform.start found. Please make sure that:
- Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
- There is corresponding configuration for the animation named `@transform.start` defined in the `animations` field of the `@Component` d```
The error is a bit deceptive. I have animations imported, but the animations are not "provided" in the tests so provide them with provideAnimations
:
import { provideAnimations } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppComponent],
providers: [provideAnimations()] // <---
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});