測試

測試確保您的程式碼如您預期運作，並節省您繁瑣的除錯時間。

請參閱入門套件文件，以獲取易於使用的設定，其中包含一個完全預先配置的測試環境，該環境非常適合測試 Lit 元件。

選擇測試框架

Lit 是一個標準的現代 Javascript 函式庫，您可以使用幾乎任何 Javascript 測試框架來測試您的 Lit 程式碼。有許多流行的選項，包括 Jest、Karma、Mocha、Jasmine、WebdriverIO 和 Web Test Runner。

您需要確保您的測試環境支援一些功能，才能有效地測試您的 Lit 程式碼。

在瀏覽器中測試

「在瀏覽器中測試」的永久連結

Lit 元件設計為在瀏覽器中執行，因此測試應在瀏覽器環境中進行。專注於測試 node 程式碼的工具可能不太適合。

雖然可以透過模擬 DOM 呼叫來在沒有瀏覽器的情況下進行測試，但我們不建議這種方法，因為它不會以使用者體驗的方式測試程式碼。

支援現代 Javascript

「支援現代 Javascript」的永久連結

您使用的測試環境必須支援使用現代 Javascript，包括使用帶有裸模組說明符的模組，或適當地降低現代 Javascript 的層級。有關更多詳細資訊，請參閱舊版瀏覽器的需求文件。

使用 Polyfill

「使用 Polyfill」的永久連結

為了在較舊的瀏覽器上進行測試，您的測試環境需要載入一些 Polyfill，包括 web components polyfills 和 Lit 的 polyfill-support 模組。有關更多詳細資訊，請參閱Polyfill文件。

使用 Web Test Runner

「使用 Web Test Runner」的永久連結

Web Test Runner 專門設計用於使用現代 Web 功能（如自訂元素和陰影 DOM）測試像 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」的永久連結

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.dev.org.tw/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 中尋找元素和更多資訊的資訊。

編輯此頁面

上一個開發下一個發佈