テスト

1. テスト環境の設定

Lit プロジェクトでのテストには、@web/test-runnerとそのプラグインを使用します。これらは、モダンなブラウザテストランナーで、Lit コンポーネントのテストに適しています。

npm install --save-dev @web/test-runner @web/test-runner-commands @web/test-runner-coverage web-test-runner-html

2. テストの作成

my-elementコンポーネントのテストを例に、テストファイルを作成します。

// test/my-element.test.js
import { html, fixture, expect } from '@open-wc/testing';
import '../src/my-element.js';

describe('MyElement', () => {
  it('renders default content', async () => {
    const el = await fixture(html`<my-element></my-element>`);
    expect(el.shadowRoot.querySelector('p').textContent).to.equal(
      'Hello, Lit!',
    );
  });

  it('updates property on attribute change', async () => {
    const el = await fixture(html`<my-element name="Test"></my-element>`);
    expect(el.name).to.equal('Test');
  });
});

このテストは、my-elementがデフォルトのテキストをレンダリングし、属性の変更に応じてプロパティが更新されることを検証します。

3. テストの実行

package.jsonにテストスクリプトを追加し、テストを実行します。

"scripts": {
  "test": "web-test-runner \"test/**/*.test.js\" --coverage"
}

コマンドラインで以下を実行します。

npm test

デプロイ

1. ビルドスクリプトの設定

プロダクションビルドを行うために、rollupなどのビルドツールを設定します。ここでは簡単のため、ビルドステップの詳細は省略します。

2. Netlify にデプロイ

Netlifyは、フロントエンドプロジェクトをデプロイするのに便利なプラットフォームです。GitHub からの直接デプロイをサポートしているため、GitHub リポジトリにプロジェクトをプッシュしておきます。

Netlify にログインした後、新しいサイトを「New site from Git」で作成し、プロジェクトを含む GitHub リポジトリを選択します。ビルドコマンドと公開ディレクトリを設定し（例: npm run buildとdist）、デプロイを開始します。

3. デプロイの確認

デプロイが完了すると、Netlify からサイトの URL が提供されます。この URL を通じて、世界中の誰でもアプリケーションにアクセスできるようになります。

Table of Contents