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

事実であること、私はのanimationsプロパティにトリガををコピー、貼り付ける場合@Componentデコレータ私のテストパス...そうでなければ、それはアニメーション宣言を見つけるように見えないので失敗します。

アイデア？

Answer 1

身体に同じ問題がある場合は、自分の質問に答えます。

あなたは@Componentデコレータで前styleUrlsプロパティanimationsプロパティを配置する必要があることを指定する問題hereがあります。

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

そしてvoila！