Vue ユニットテストに関する予備調査

序文

ユニットテストとは、ソフトウェア内のテスト可能な最小単位の検査と検証を指します。ユニットテストにおけるユニットの意味については、一般的に言えば、その具体的な意味は実際の状況に応じて決定する必要があります。たとえば、C言語ではユニットは関数を指し、Javaではユニットはクラスを指し、グラフィカルソフトウェアではウィンドウやメニューを指すことがあります。Vue、React、Angularなどのフロントエンドフレームワークでは、コンポーネントのユニットテストが最も重要です。

なぜユニットテストを導入するのですか?

今の時代、さまざまなプログラミング言語、開発フレームワーク、統合ツールが隆盛を極めていますが、ソフトウェアエンジニアは依然として最前線で奮闘しており、バグ、レガシーコード、技術的負債、リファクタリングに圧倒されています。プロジェクトが十分に大きくなると、モジュールやコンポーネントを積み重ねる過程で、以前のモジュールに影響を与える可能性が非常に高くなります。ただし、影響を受けるモジュールはテストに合格しており、反復すると、システムを再テストするテスターはほとんどいません。したがって、影響を受けるモジュールは、オンラインで展開されると目に見えないバグが発生する可能性があります。そのため、自動テストを使用します。最も重要な役割は、大規模プロジェクトの各反復において、システム全体の正しい動作とシステムの堅牢性を確保することです。要約すると、次の点になります。

自動テストで時間を節約
低レベルのバグを減らす
コンポーネントの動作を説明するドキュメントを提供します
ユニットテストを書きながらコードを改善できる
コンポーネントの読み取りを容易にし、リファクタリングを促進します
仕事が完了したことを証明する
コードレビューに最適
コードパフォーマンス
いくつかの指標を提供する

ユニットテストの概要

ユニットテストは通常、アプリケーションの最小部分に対して行われます。Vueでは、コンポーネントがテストされるユニットです（後述）。

まず、簡単な単体テストから始めましょう。コードでは、sum 関数を使用して 2 つの数値の合計を計算します。

ユニットテストは、ソースコード内で関数を個別に呼び出し、正しく動作することを確認する機能です。次の例を見てください。これは、sum 関数をエクスポートして関数を実行し、関数が返されない場合にエラーをスローすることをアサートする比較的単純なプログラムです。

// 合計.js
エクスポートデフォルト関数sum(a,b){
    a + bを返す
}
// 合計スペックjs
'./sum.js' から sum をインポートします。
関数testSum(){
    合計(1,2)!==3){
        新しいエラーをスローします('sum(1,2) は 3 を返しません')
    }
}
テスト合計()

ユニットテストは分離されたユニットに対して実行されるため、適切なユニットテストが記述されていれば、コードの問題を正確に明らかにすることができます。

また、テストでは、スナップショットテストに注目することがあります。スナップショットテストは、差異検出に似ています。スナップショットテストでは、実行中のプログラムとスクリーンショットを比較します。差異がある場合は、エラーが表示されます。vue テストでは、vueTestUtil が同様の機能を提供しており、js 内のシリアル化可能な値を比較したり、コンポーネント内の dom 出力を比較したりできます。

テスト開発パターン

テスト開発に興味がある方は、テスト駆動開発 (TDD) や動作駆動開発 (BDD) について聞いたことがあるかもしれません。

1. テスト駆動開発（TDD）

テスト駆動開発 (略して TDD) は、従来のソフトウェア開発プロセスとは異なる新しい開発方法です。特定の機能のコードを書く前にテストコードを記述し、その後テストに合格する機能コードのみを記述して、テストを使用して開発プロセス全体を推進する必要があります。これにより、簡潔で使いやすく高品質なコードを書くことができ、開発プロセスがスピードアップします。

まず、開発者はビジネスロジックを書く前に、いくつかのテストケースを書く必要があります。これらのテストケースを実行すると、テスト対象のビジネスロジックがまったく実装されていないため、失敗した結果が返されます。これらのビジネスロジックを実装し、テストケースを実行して合格率を確認します。優れた開発者であれば、テストケースを修正するかリファクタリングすることで、これらのケースが修正される可能性があります。

新しい機能を開発する場合も、上記の手順を繰り返します。中心となるのは、テストケースを最前線に置くことです。フローチャートは次のとおりです。

たとえば、具体的な例を使って TDD について説明しましょう。現在の要件が階乗関数を実装することだとします。このテストケースを実装するには、jest を使用します。

var fac = require("../src/index.js");

test("負の数を入力するとNaNが返されます ", () => {
  fac(-1) が NaN であると予想します。
});

test("0を入力すると1が返されます ", () => {
  期待値(fac(0))が1になる。
});

test("1を入力すると1が返されます ", () => {
  期待値(fac(1))toBe(1);
});

test("2 を入力すると 2 が返される", () => {
  期待値(fac(2))toBe(2);
});

test("3を入力すると6が返される", () => {
  期待値(fac(3))toBe(6);
});

fac 関数をまだ実装していないため、このテストケースを実行すると確実に失敗します。次に、階乗関数を実装しましょう。

module.exports = 関数 fac(n) {
  n < 0 の場合は NaN を返します。
  (n === 0)の場合は1を返します。
  n * fac(n - 1) を返します。
};

ここでこのテストケースを再度実行すると、次の結果が得られます。

ご覧の通り、すべてのケースが合格しました。これが TDD 開発モードです。

2. 行動駆動開発（BDD）

従来のソフトウェア開発では、ビジネス担当者が要件を受け取り、要件アナリストに引き渡します。要件アナリストは要件仕様または設計を作成します。次に、ソフトウェア開発者は要件仕様に基づいてアーキテクチャ設計とコード開発を行います。次に、テスト担当者は要件仕様に基づいてテストケースを作成し、テストを行います。要件の生成からテストの配信まで、複数の異なる役割が関与しており、この期間中に情報の損失や誤解が簡単に発生する可能性があります。リンクのいずれかにエラーがある限り、R&D チームが適格な製品を提供することは困難です。

BDD は、開発者、QA、およびソフトウェアの非技術者やビジネス関係者間のコラボレーションを促進するアジャイルソフトウェア開発手法であり、アジャイルプロジェクトに特に適しています。

それを説明するために例を挙げてみましょう:

var fac = require("../src/index.js");

describe("階乗関数 fac: を検証する", function () {
  it("負の数を入力するとNaNが返されます ", () => {
    fac(-1) が NaN であると予想します。
  });

  it("0を入力すると1が返されます ", () => {
    期待値(fac(0))が1になる。
  });

  it("1を入力すると1が返されます ", () => {
    期待値(fac(1))toBe(1);
  });

  it("2を入力すると2が返されます", () => {
    期待値(fac(2))toBe(2);
  });

  it("3を入力すると6が返されます", () => {
    期待値(fac(3))toBe(6);
  });
});

テストケースを実行して結果を取得します。

コードの内容とテスト結果を比較すると、違いはそれほど大きくないことがわかりました。主な違いは文言です。BDD テストケースは文書を読んでいるように見えます。構造は非常に明確です。チームの協力、コードの読み取り、リファクタリングの促進に重要な役割を果たします。テストケースを流暢に読むことができれば、自然とより良いコードを書くことができます。

ここでの例は、テスト駆動開発との違いを説明するためだけのものであり、実際の動作駆動開発を表すものではありません。動作駆動開発は、概念理論に近いものです。

要約: BDD は結果だけでなく機能にも重点を置いています。業界の有名な格言を借りると、「BDD は開発者のソフトウェア設計を支援し、TDD は開発者のソフトウェアテストを支援します」となります。

Vue でのユニットテスト

ユニットテストを使用すると、開発者にコードに対する自信を与えることを目的として、独立したコードユニットを個別にテストできます。詳細かつ意味のあるテストを記述することで、新しい機能を構築したり既存のコードをリファクタリングしたりする際に、アプリケーションが機能し安定した状態を維持することを確信できます。 Vue アプリケーションのユニットテストは、他の種類のアプリケーションのユニットテストとそれほど違いはありません。

フレームワークの選択

Vue 開発者であれば、Vue コンポーネントでテンプレートを記述する方法をよく理解しているはずです。テンプレート、スタイル、スクリプトのテンプレート構文は、React の Jsx 構文よりも直接的で自然です。Vue では、コンポーネントを最小のテスト単位として使用するのが非常に適しています。

ユニットテストは通常、フレームワークに直接関係しませんが、機能セット、パフォーマンス、事前コンパイルされた単一ファイルコンポーネントのサポート、ユニットテストによって生成される価値、開発プロセスの利便性に基づいて評価する必要があります。

最高レベルのエラー報告

テストが失敗したときに役立つエラーメッセージを提供することは、ユニットテストフレームワークにとって非常に重要です。これはアサーションライブラリの仕事です。高品質のエラーメッセージを含むアサーションを使用すると、問題のデバッグに必要な時間を最小限に抑えることができます。アサーションライブラリは、単にどのテストが失敗したかを伝えるだけでなく、予想される結果と実際に得られた結果など、追加のコンテキストとテストが失敗した理由も提供する必要があります。 Jest などの一部のユニットテストフレームワークにはアサーションライブラリが含まれています。 Mocha などの他のツールでは、別のアサーションライブラリ (通常は Chai) をインストールする必要があります。

活発なコミュニティとチーム

主要なユニットテストフレームワークはオープンソースであるため、テストを長期にわたって維持し、プロジェクト自体がアクティブな状態を維持することを目指すチームにとって、アクティブなコミュニティを持つことは非常に重要です。さらに、アクティブなコミュニティが、問題が発生するたびに追加のサポートを提供してくれるという利点もあります。

ここでは、シンプルさを重視した JavaScript テストフレームワークである Jest フレームワークの使用を検討します。ユニークな機能として、テスト用のスナップショットを生成し、アプリケーションユニットを検証する別の方法を提供する機能があります。

Jest は最も機能が充実したテストランナーです。最小限の構成が必要で、JSDOM がデフォルトでインストールされており、アサーションが組み込まれており、コマンドラインユーザーエクスペリエンスが非常に優れています。

ジェスト情報

ジェスト公式サイト

Vue CLI 公式プラグイン - Jest

Vue は、非常に便利なテストツールライブラリである Vue Test Utils を公式に提供しています。次に、Vue Test Utils を使用して Vue コンポーネントの単体テストを実行する方法について説明します。

Vue テストユーティリティ

コンポーネントインスタンス、セレクターのレンダリング、グローバルコンポーネントの挿入のシミュレーション、状態、データフロー、ライフサイクル、イベントのシミュレーション、さらにはルーティングのシミュレーションなど、強力な機能を備えた豊富な API を提供します。試してみましょう。

インストール：

Vue Test Utils のインストール方法は難しくありません。まずテストランナーを選択します。Jest または Mocha を選択できます。ここでは Jest を選択します。

まだ Vue-cli を使用してプロジェクトを作成していない場合は、vue-cli でプロジェクトを作成するときに Jest を選択できます。フレームワークは自動的に Vue Test Utils をインストールし、以下を実行します。

 vue 作成 vue-test

Vue-cli 経由ですでにプロジェクトを作成している場合は、以下を実行できます。

    vue に @vue/unit-jest を追加します

Jest の設定: jest の設定はルートディレクトリの jest.config.js または jest.config.json に配置できます。

モジュール.エクスポート = {
  preset: "@vue/cli-plugin-unit-jest", // 単一のテストプラグイン moduleFileExtensions: ["js", "json", "vue", "less", "css"], // サフィックス変換: { // モジュール解析 "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<ルートディレクトリ>/node_modules/vue-jest",
  },
  moduleNameMapper: { // エイリアス識別 "^@/(.*)$": "<rootDir>/src/$1",
    "\\.(css|less)$": "<rootDir>/tests/mocks/styleMock.js",
  },
  // スナップショット解析にはjest-serializer-vueのインストールが必要です
  スナップショットシリアライザー: ["<rootDir>/node_modules/jest-serializer-vue"],
  collectCoverage: true、
  // カバレッジディレクトリ coverageDirectory: "report/coverage",
  // 単一のテストレポート設定。jest-html-reporter をインストールする必要があります
  記者：
    "デフォルト"、
    [
      "./node_modules/jest-html-reporter",
      {
        ロゴ: "https://rdc-test.mingyuanyun.com/static/img/rdc.png",
        pageTitle: 「単一テストレポート (ワークベンチ)」、
        出力パス: "report/unit-test/index.html",
        includeFailureMsg: true、
      },
    ]、
  ]、
};

インストールする必要があるモジュール:

jest-serializer-vue (シリアル化ツール)
jest-html-reporter (単一のテストレポートツール。他のツールも選択できます)

設定が完了したら、ユニットテストを問題なく実行できます。

以下に示すように、これはクリックすると数値が増加する非常にシンプルなコンポーネントです。

// インクリメント.js
<テンプレート>
  <div>
    <p>数は {{ count }} です。</p>
    <button @click="increment">増加</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      カウント: 0,
    };
  },
  メソッド: {
    インクリメント() {
      this.count++;
    },
  },
};
</スクリプト>

<style スコープ lang="less">
ｐ {
  フォントサイズ: 2em;
  テキスト配置: 中央;
}
</スタイル>

Vue Test Utils は、ラッパー、マウント、shallowMount を実装するためのメソッドを提供します。ラッパーを取得したら、そのインスタンスにカプセル化された多くのインターフェースを使い始めることができます。

// 増分.spec.js
// テストツールをインポートしますsetimport { mount } from "@vue/test-utils";
「@/views/Increment」からIncrementをインポートします。

記述("増分", () => {
  // コンポーネントをマウントし、ラッパーを取得します。const wrapper = mount(Increment);
  ラッパーを定数vmで定義します。
  it("マークアップをレンダリング", () => {
    expect(wrapper.html()).toContain("<p>数値は0です</p>");
  });

  // ユーザーがクリックしたことをシミュレートします("ボタンをクリックするとカウントが増加します", () => {
    vm.countが0であると予想します。
    const button = wrapper.find("button");
    button.trigger("クリック");
    期待値(vm.count)が1である。
  });

  // クリックしてDOMを表示
  it("ボタンをクリックするとカウントが増加し、domが更新されます", async () => {
    期待(wrapper.text()).toContain("1");
    const button = wrapper.find("button");
    ボタンのトリガー("クリック")を待機します。
    wrapper.text().toContain("2"); を期待します。
  });
});

ユニットテストを書いたら、それを実行してみましょう。