Skip to main content

Testing Modules with BrowserAnimationsModule

By default, Angular recommends replacing BrowserAnimationsModule with NoopAnimationsModule in unit tests.

In order to do so globally, you can use ngMocks.globalReplace:

src/test.ts
ngMocks.globalReplace(BrowserAnimationsModule, NoopAnimationsModule);

Now, every time ng-mocks sees BrowserAnimationsModule, it will substitute it with NoopAnimationsModule.

MockBuilder​

Please check how MockBuilder behaves in this case:

// BrowserAnimationsModule is replaced by NoopAnimationsModule.
MockBuilder(MyComponent, MyModule);

// BrowserAnimationsModule will be kept as it is.
MockBuilder(MyComponent, MyModule).keep(BrowserAnimationsModule);

// BrowserAnimationsModule will be mocked, not replaced.
MockBuilder(MyComponent, MyModule).mock(BrowserAnimationsModule);

// BrowserAnimationsModule will be excluded from declarations.
MockBuilder(MyComponent, MyModule).exclude(BrowserAnimationsModule);

ngMocks.guts​

Please check how ngMocks.guts behaves in this case:

// BrowserAnimationsModule is replaced by NoopAnimationsModule.
ngMocks.guts(MyComponent, MyModule);

// BrowserAnimationsModule will be kept as it is.
ngMocks.guts([MyComponent, BrowserAnimationsModule], MyModule);

// BrowserAnimationsModule will be mocked, not replaced.
ngMocks.guts([MyComponent, MyModule], BrowserAnimationsModule);

// BrowserAnimationsModule will be excluded from declarations.
ngMocks.guts(MyComponent, MyModule, BrowserAnimationsModule);

fakeAsync​

A kept / mock BrowserAnimationsModule causes issues with fakeAsync. Please open an issue on GitHub, if you have a case where NoopAnimationsModule isn't a solution.

Writing tests​

In contrast to regular tests, you need to await fixture.whenStable() after fixture.detectChanges() to render noop animations correctly.

Because fixture.whenStable() returns a promise, you need to make the whole test async.

it('should see all elements', async () => { // <-- async
  // ... configuration
  fixture.detectChanges(); // <-- detecting changes
  await fixture.whenStable(); // <-- awaiting animations
  // ... assertion
});

:::