Angular 4 + Jest-Preset-Angular：使用从文件导入的触发器在主机上测试动画

Question

我在使用 Jest-Preset-Angular 在一个组件上运行测试时遇到问题，该组件在从单独文件导入的宿主元素上具有动画（因此它可以在另一个组件中重复使用）。

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 { }

事实是，如果我将触发器 复制粘贴 到 @Component 装饰器的 animations 属性中，我的测试将通过......否则它会失败，因为它似乎找不到动画声明。

有什么想法吗？

Answer 1

如果有人遇到同样的问题，我会回答我自己的问题。

here 存在一个问题，指定您需要将animations 属性放在styleUrls 属性在@Component 装饰器中。

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

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

瞧！