feat: remove animations dependency (#531)

BREAKING CHANGE:

Angular recommends using CSS animations, https://angular.dev/guide/animations/migration

Because of the removal of the animations dependency, the `NoopAnimationsModule` is no longer automatically imported in the render function.

BEFORE:

The `NoopAnimationsModule` is always imported to the render the component.

AFTER:

Import the `NoopAnimationsModule` in your render configuration where needed:

```ts
 await render(SutComponent, {
    imports: [NoopAnimationsModule],
});
```

Author: timdeschryver

apps/example-app/src/app/examples/15-dialog.component.spec.ts

@@ -1,4 +1,5 @@
 import { MatDialogRef } from '@angular/material/dialog';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
@@ -9,6 +10,7 @@ test('dialog closes', async () => {
 
   const closeFn = jest.fn();
   await render(DialogContentComponent, {
+    imports: [NoopAnimationsModule],
     providers: [
       {
         provide: MatDialogRef,
@@ -28,7 +30,9 @@ test('dialog closes', async () => {
 test('closes the dialog via the backdrop', async () => {
   const user = userEvent.setup();
 
-  await render(DialogComponent);
+  await render(DialogComponent, {
+    imports: [NoopAnimationsModule],
+  });
 
   const openDialogButton = await screen.findByRole('button', { name: /open dialog/i });
   await user.click(openDialogButton);
@@ -50,7 +54,9 @@ test('closes the dialog via the backdrop', async () => {
 test('opens and closes the dialog with buttons', async () => {
   const user = userEvent.setup();
 
-  await render(DialogComponent);
+  await render(DialogComponent, {
+    imports: [NoopAnimationsModule],
+  });
 
   const openDialogButton = await screen.findByRole('button', { name: /open dialog/i });
   await user.click(openDialogButton);

projects/testing-library/package.json

@@ -29,7 +29,6 @@
     "migrations": "./schematics/migrations/migrations.json"
   },
   "peerDependencies": {
-    "@angular/animations": ">= 20.0.0",
     "@angular/common": ">= 20.0.0",
     "@angular/platform-browser": ">= 20.0.0",
     "@angular/router": ">= 20.0.0",

projects/testing-library/src/lib/models.ts

@@ -178,12 +178,11 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
   /**
    * @description
    * A collection of imports needed to render the component, for example, shared modules.
-   * Adds `NoopAnimationsModule` by default if `BrowserAnimationsModule` isn't added to the collection.
    *
    * For more info see https://angular.io/api/core/NgModule#imports
    *
    * @default
-   * `[NoopAnimationsModule]`
+   * `[]`
    *
    * @example
    * await render(AppComponent, {

projects/testing-library/src/lib/testing-library.ts

@@ -12,7 +12,6 @@ import {
   isStandalone,
 } from '@angular/core';
 import { ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed, tick } from '@angular/core/testing';
-import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { NavigationExtras, Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import type { BoundFunctions, Queries } from '@testing-library/dom';
@@ -513,15 +512,9 @@ function addAutoImports<SutType>(
   sut: Type<SutType> | string,
   { imports = [], routes }: Pick<RenderComponentOptions<any>, 'imports' | 'routes'>,
 ) {
-  const animations = () => {
-    const animationIsDefined =
-      imports.indexOf(NoopAnimationsModule) > -1 || imports.indexOf(BrowserAnimationsModule) > -1;
-    return animationIsDefined ? [] : [NoopAnimationsModule];
-  };
-
   const routing = () => (routes ? [RouterTestingModule.withRoutes(routes)] : []);
   const components = () => (typeof sut !== 'string' && isStandalone(sut) ? [sut] : []);
-  return [...imports, ...components(), ...animations(), ...routing()];
+  return [...imports, ...components(), ...routing()];
 }
 
 async function renderDeferBlock<SutType>(

projects/testing-library/tests/render.spec.ts

@@ -17,7 +17,6 @@ import {
   model,
 } from '@angular/core';
 import { outputFromObservable } from '@angular/core/rxjs-interop';
-import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TestBed } from '@angular/core/testing';
 import { render, fireEvent, screen, OutputRefKeysWithCallback, aliasedInput } from '../src/public_api';
 import { ActivatedRoute, Resolve, RouterModule } from '@angular/router';
@@ -331,25 +330,6 @@ describe('excludeComponentDeclaration', () => {
   });
 });
 
-describe('animationModule', () => {
-  it('adds NoopAnimationsModule by default', async () => {
-    await render(FixtureComponent);
-    const noopAnimationsModule = TestBed.inject(NoopAnimationsModule);
-    expect(noopAnimationsModule).toBeDefined();
-  });
-
-  it('does not add NoopAnimationsModule if BrowserAnimationsModule is an import', async () => {
-    await render(FixtureComponent, {
-      imports: [BrowserAnimationsModule],
-    });
-
-    const browserAnimationsModule = TestBed.inject(BrowserAnimationsModule);
-    expect(browserAnimationsModule).toBeDefined();
-
-    expect(() => TestBed.inject(NoopAnimationsModule)).toThrow();
-  });
-});
-
 describe('Angular component life-cycle hooks', () => {
   @Component({
     selector: 'atl-fixture',