Angular と Karma-Jasmine で CUSTOM_ELEMENTS_SCHEMA を追加してもエラーが表示される問題

Angular と Karma-Jasmine で CUSTOM_ELEMENTS_SCHEMA を追加してもエラーが表示される問題

Angular アプリケーションで CUSTOM_ELEMENTS_SCHEMA を NgModule.schemas に追加しても、Karma-Jasmine テストでエラーが発生する場合があります。

原因:

この問題は、テスト環境と本番環境でモジュールの読み込み順序が異なることが原因で発生します。

解決策:

この問題を解決するには、次のいずれかの方法を試してください。

TestBed.configureTestingModule で schemas オプションを使用する:

TestBed.configureTestingModule({
  imports: [
    MyModule
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
});

@NgModule.schemas を @Component.schemas に移動する:

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class MyComponent {
  // ...
}

@angular/compiler-cli の ngc コマンドを使用する:

ngc -p tsconfig.spec.json

Karma 設定ファイルで singleRun オプションを false に設定する:

module.exports = function(config) {
  config.set({
    // ...
    singleRun: false
  });
};

補足:

• 上記の解決策を試しても問題が解決しない場合は、問題の詳細情報を提供していただければ、さらに詳しく調査いたします。
• 英語での情報も参照したい場合は、以下のキーワードで検索してみてください。

"angular" "karma-jasmine" "CUSTOM_ELEMENTS_SCHEMA" "Error"

my.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

import { Component, OnInit } from '@angular/core';
import { TestBed, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

describe('MyComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        MyModule
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA
      ]
    }).compileComponents();
  }));

  it('should create the component', () => {
    const fixture = TestBed.createComponent(MyComponent);
    const component = fixture.componentInstance;
    expect(component).toBeTruthy();
  });

  it('should render the component template', () => {
    const fixture = TestBed.createComponent(MyComponent);
    const element = fixture.nativeElement;
    expect(element.querySelector('h1').textContent).toBe('My Component');
  });

});

my.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { MyComponent } from './my.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    MyComponent
  ],
  bootstrap: [MyComponent]
})
export class MyModule { }

このコードを実行すると、Karma テストが成功します。

• 上記のコードは、単純な例です。実際のアプリケーションでは、より複雑なテストが必要になる場合があります。
• 詳細については、Angular ドキュメントと Karma ドキュメントを参照してください。

CUSTOM_ELEMENTS_SCHEMA を使用せずに Angular コンポーネントをテストする方法

テスト対象のコンポーネントと同じモジュールにカスタム要素を登録する:

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    MyComponent,
    CustomElement
  ],
  bootstrap: [MyComponent]
})
export class MyModule { }

TestBed.overrideComponent を使用してカスタム要素をモックする:

TestBed.overrideComponent(MyComponent, {
  set: {
    template: '<custom-element></custom-element>'
  }
});

Karma 設定ファイルで customElements オプションを使用する:

module.exports = function(config) {
  config.set({
    // ...
    customElements: true
  });
};

ngc -p tsconfig.spec.json --target=es5 --module=commonjs

これらの方法の利点と欠点:

利点:

• CUSTOM_ELEMENTS_SCHEMA を使用しないので、テストがより正確になります。
• テスト対象のコンポーネントと同じ環境でカスタム要素をテストできます。

• テストコードが複雑になる場合があります。
• カスタム要素のモックを作成する必要がある場合があります。