テスト

テストを行うことで、コードが意図したとおりに機能することを確認し、退屈なデバッグ作業から解放されます。

完全に事前設定されたテスト環境でLitコンポーネントのテストに最適な、使いやすい設定については、スターターキットのドキュメントをご覧ください。

Litは標準の最新のJavaScriptライブラリであり、事実上すべてのJavaScriptテストフレームワークを使用してLitコードをテストできます。 Jest、Karma、Mocha、Jasmine、WebdriverIO、Web Test Runnerなど、多くの一般的なオプションがあります。

Litコードを効果的にテストするために、テスト環境でサポートする必要がある点がいくつかあります。

Litコンポーネントはブラウザで実行するように設計されているため、テストはブラウザ環境で行う必要があります。 nodeコードのテストに特化したツールは適していない場合があります。

使用するテスト環境では、ベアマジュール指定子を使用したモジュールの使用を含め、最新のJavaScriptを使用するためのサポート、または最新のJavaScriptを適切にダウングレードするためのサポートが必要です。詳細については、レガシーブラウザの要件のドキュメントをご覧ください。

古いブラウザでテストするには、テスト環境でWebコンポーネントポリフィルとLitのpolyfill-supportモジュールなど、いくつかのポリフィルを読み込む必要があります。詳細については、ポリフィルのドキュメントをご覧ください。

Web Test Runnerは、カスタム要素やシャドウDOMなどの最新のWeb機能を使用して、Litなどの最新のWebライブラリをテストするために特別に設計されています。 Web Test Runnerのはじめにドキュメントをご覧ください。

古いブラウザをサポートするには、Web Test Runnerを次のように設定する必要があります

@web/dev-server-legacyをインストールします

npm i @web/dev-server-legacy --save-dev

web-test-runner.config.jsを設定します

import { legacyPlugin } from '@web/dev-server-legacy';

export default {
  /* ... */
  plugins: [
    // make sure this plugin is always last
    legacyPlugin({
      polyfills: {
        webcomponents: true,
        // Inject lit's polyfill-support module into test files, which is required
        // for interfacing with the webcomponents polyfills
        custom: [
          {
            name: 'lit-polyfill-support',
            path: 'node_modules/lit/polyfill-support.js',
            test: "!('attachShadow' in Element.prototype)",
            module: false,
          },
        ],
      },
    }),
  ],
};

WebdriverIOは、コンポーネントテストまたはエンドツーエンドテストに適したオプションです。 モッキングやコードカバレッジレポートのサポートなど、非常に魅力的な利点があります。

WebdriverIOは、プロジェクトで次のように設定できます

npm init wdio@latest ./

いくつかの質問を案内する設定ウィザードが起動します。必ず以下を選択してください

• どのような種類のテストを行いたいですか？
  コンポーネントまたはユニットテスト - ブラウザ内
• コンポーネントの構築にどのフレームワークを使用していますか？
  Lit

残りの質問は必要に応じて回答できます。

コンポーネントをテストするには、テスト開始前にテストページにレンダリングし、テスト後にクリーンアップされるようにする必要があります

import { expect, $ } from '@wdio/globals'

// Component.ts contains the <simple-greeting> component implemented the same as:
// https://lit.dokyumento.jp/docs/components/overview/
import './components/Component.ts'

describe('Lit Component testing', () => {
    let elem: HTMLElement

    beforeEach(() => {
        elem = document.createElement('simple-greeting')
    })

    it('should render component', async () => {
        elem.setAttribute('name', 'WebdriverIO')
        document.body.appendChild(elem)
        await expect($(elem)).toHaveText('Hello, WebdriverIO!')
    })

    afterEach(() => {
        elem.remove()
    })
})

WebdriverIOのドキュメントで、要素アサーション、シャドウDOM内の要素の検索、その他の詳細をご覧ください。

このページを編集