Jest-preset-angular: Animation on host with trigger imported from file

[jfcere]

Hi,

I am not sure if this is the right place to get help on this but I am having an issue issue when running tests with Jest on a component that has an animation on host element imported from a seperate file (so it can be reused in another component).

example.animation.ts

import { trigger } from '@angular/animations';

export const ExampleAnimationHost = { '[@example]': '' };
export const ExampleAnimationTrigger = trigger('example', []);

example.component.ts

import { Component } from '@angular/core';
import { ExampleAnimationHost, ExampleAnimationTrigger } from './example.animation';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
  animations: [ExampleAnimationTrigger],
  host: ExampleAnimationHost,
})
export class ExampleComponent { }

The fact is that if I copy-paste the trigger into the animations property of the @Component decorator my test pass ... otherwise it fails as it doesn't seems to find the animation declaration and I get the error bellow.

From related issue on Angular
When you have a HostBinding attribute in a component which refers to an animation trigger, but you have no defined animations, you get a quite misleading error message

Found the synthetic property @example. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
        at new Error (native)

Any ideas?

[thymikee]

Maybe try this tip: https://github.com/thymikee/jest-preset-angular/issues/22#issuecomment-297557830

[jfcere]

@thymikee thanks, setting animations property before styleUrls property in the @Component decorator does work!

@Component({
  animations: [ExampleAnimationTrigger], // animations property must be place before styleUrls
  host: ExampleAnimationHost,
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
})
export class ExampleComponent { }

Because the issue #22 was closed I thought it has been fixed in v2.0.4 ... any plan to really fix the issue for good?

I spent hours on this ... I feel silly after finding this out :confused:

[thymikee]

Sorry about that 😞.
Fixing it requires at least better regex and at best – using AST to transform certain things. I don't have time for this now, but there's issue tracking this: https://github.com/thymikee/jest-preset-angular/issues/29

[jfcere]

Alright I understand. Btw thank you for all your efforts to offer such a nice plugin!