単体テストとエンドツーエンド テストに Vue を使用する方法

単体テストとエンドツーエンド テストに Vue を使用する方法

はじめに: 開発プロセス中、コードの品質と安定性を確保するために、通常、単体テストとエンドツーエンド テストを実行する必要があります。エンドツーエンドのテスト。この記事では、単体テストとエンドツーエンド テストに Vue を使用する方法と、対応するコード例を紹介します。

1. 単体テスト
単体テストとは、ソフトウェア内のテスト可能な最小単位のテストと検証を指します。Vue アプリケーションの場合、単体テストはコンポーネントに対して実行できます。 Vue では、Karma ツールと Jest ツールを使用して単体テストを実行できます。

1. Karma と Jest をインストールする
   コマンド ラインで次のコマンドを実行して Karma と Jest をインストールします:

npm install karma --save-dev
npm install jest --save-dev

2. テスト ケースを作成する
   Vue の場合、コンポーネントが配置されているディレクトリにテスト フォルダーを作成し、テスト ケースを保存します。テスト ケースを作成するために、tests フォルダーに .spec.js で終わるファイルを作成します。

たとえば、HelloWorld コンポーネントのテスト ケースを作成します。テスト フォルダーに HelloWorld.spec.js ファイルを作成し、次のコードを記述します。

import { mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'Hello World'
    const wrapper = mount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toBe(msg)
  })
})

3. 単体テストを実行する
   コマンド ラインで次のコマンドを実行して単体テストを実行します:

npm run test:unit

4. 単体テストの結果
   実行が完了すると、コマンド ライン ウィンドウに単体テストの結果が表示されます。テスト ケース内のアサーションに基づいて、テストが成功するかどうかを判断できます。

2. エンドツーエンドのテスト
エンドツーエンドのテストとは、ユーザー インターフェイスやバックグラウンド インタラクションを含むアプリケーション全体のテストを指します。 Vue では、Nightwatch.js をエンドツーエンドのテストに使用できます。

1. Nightwatch.js のインストール
   コマンド ラインで次のコマンドを実行して Nightwatch.js をインストールします:

npm install nightwatch --save-dev

2. テスト ケースの作成
   プロジェクト内 ルート ディレクトリにテスト フォルダーを作成し、エンドツーエンドのテスト ケースを保存します。エンドツーエンドのテスト ケース ファイルを保存するために、tests フォルダーの下に e2e フォルダーを作成します。

たとえば、ホームページのテスト ケースを作成します。 e2e フォルダーに home.spec.js ファイルを作成し、次のコードを記述します。

module.exports = {
  'Home Page Test': function (browser) {
    browser
      .url('http://localhost:8080/#/home')
      .waitForElementVisible('body')
      .assert.containsText('h1', 'Welcome to Home Page')
      .end()
  }
}

3. Configure Nightwatch.js
   プロジェクト ルート ディレクトリに nightwatch.config.js ファイルを作成して構成します。 Nightwatch .js 関連のパラメータ。

module.exports = {
  src_folders: ['tests/e2e'],
  webdriver: {
    start_process: true,
    server_path: require('chromedriver').path,
    port: 9515
  },
  test_settings: {
    default: {
      desiredCapabilities: {
        browserName: 'chrome'
      }
    }
  }
}

4. エンドツーエンド テストの実行
   コマンド ラインで次のコマンドを実行して、エンドツーエンド テストを実行します:

npm run test:e2e

5. エンドツーエンド テストの結果
   実行が完了すると、コマンド ライン ウィンドウにエンドツーエンド テストの結果が表示されます。テスト ケース内のアサーションに基づいて、テストが成功するかどうかを判断できます。

概要:
この記事では、単体テストとエンドツーエンド テストに Vue を使用する方法を紹介し、対応するコード例を示します。単体テストとエンドツーエンド テストを通じて、コードの品質と安定性が保証され、アプリケーションの信頼性が向上します。実際の開発では、コードの堅牢性と保守性を確保するために、単体テストとエンドツーエンドのテストを継続的統合プロセスに統合することをお勧めします。

以上が単体テストとエンドツーエンド テストに Vue を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。