"Unexpected synthetic property @transitionMessages found" error in angular 17 when trying to test a component with a dropdown from angular material

My application runs fine. My application is a standalone component app. When I try to test the component, I get the error mentioned in the title in Karma.

Imports of my component

import { Component } from '@angular/core';
import {MatSelectModule} from '@angular/material/select';
import {MatFormFieldModule} from '@angular/material/form-field';
import { NavigationComponent } from '../../../0_navigation/navigation.component';
import jsonDataShipments from '../../../../../assets/shipments.json';

@Component({
  selector: 'app-sort-functionality',
  standalone: true,
  imports: [NavigationComponent, MatFormFieldModule, MatSelectModule],
  templateUrl: './sort-functionality.component.html',
  styleUrl: './sort-functionality.component.css'
})

Config of my app

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(), provideAnimationsAsync(),
  ],
};

Error

Error: NG05105: 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 import BrowserAnimationsModule

I get this error

Uncaught (in promise): 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.
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.

Solution

You should try importing BrowserAnimationsModule like this:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

And import it into your testfile like this:

imports: [YourComponentName, BrowserAnimationsModule]

Hope this helps!