Vue-Jest自動テストの基本構成の詳しい説明

Vue-Jest自動テストの基本構成の詳しい説明

大規模アプリケーションの開発において、テストは非常に重要な部分です。Vue プロジェクトでは、Jest を単体テストに使用できます。Jest は Facebook が立ち上げたテスト フレームワークで、Mocha、chai、jsdom、sinon などの機能を統合しています。Jest は Vue スキャフォールディングに統合されているため、Vue プロジェクトでの単体テストには Jest を使用するのが最適です。提供されている例から、構成とテストを正常に行うのは非常に簡単なようです。ただし、実際のプロジェクトでは多くの違いがあります。ビジネス コンポーネントの 1 つをテストしているときに、多くのエラーが報告されました。この記事では、私自身の経験をまとめ、読者が構成の問題を迅速に解決できるようにします。

インストール

公式の@vue/cliから直接Vueプロジェクトを作成し、ユニットテストオプションを選択できます。

プロジェクトに必要な機能を確認してください:
 ◉ Vueのバージョンを選択
 ◉ バベル
❯◉ タイプスクリプト
 ◯ プログレッシブウェブアプリ(PWA)のサポート
 ◉ ルーター
 ◉ ヴュークス
 ◯ CSSプリプロセッサ
 ◯ リンター/フォーマッター
 ◉ ユニットテスト
 ◯ E2Eテスト

次にテストフレームワークでJestを選択します

? ユニットテストソリューションを選択する: Jest
Babel、ESLintなどの設定はどこに置きますか?専用のコンソールに
図ファイル

Vue + Ts プロジェクトによって最終的に生成された jest.config.js 構成ファイルは次のようになります。これは、私が設定しておいたのでそのまま使用してくださいと言っているかのようです。ただし、プロジェクトの場合は、互換性を手動で構成する必要があります。そうしないと、多くのエラーが報告され、続行できなくなります。

モジュール.エクスポート = {
  プリセット: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel'
}

構成

まず、このプリセット設定に何が書かれているか見てみましょう。@vue/cli-plugin-unit-jest/presets/typescript-and-babel パッケージを見つけます。実際、出力設定は次のようになります。

モジュール.エクスポート = {
  moduleFileExtensions: [ // テストファイルタイプ 'js',
    'jsx',
    'json',
    // Jest に *.vue ファイルを処理するように指示する
    'ビュー'、
    'ts'、
    'tsx'
  ]、
  transform: { // 変換メソッド // vue-jest で *.vue ファイルを処理する
    '^.+\\.vue$': require.resolve('vue-jest'),
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
    require.resolve('jest-transform-stub')、
    '^.+\\.jsx?$': require.resolve('babel-jest'),
    '^.+\\.tsx?$': require.resolve('ts-jest'),
  },
  transformIgnorePatterns: ['/node_modules/'], // 変換中にnode_modulesを無視する
  // ソースコード内で同じ @ -> src エイリアスマッピングをサポートする
  moduleNameMapper: { // @ シンボルは現在のプロジェクトの src を示します
    '^@/(.*)$': '<ルートディレクトリ>/src/$1'
  },
  テスト環境: 'jest-environment-jsdom-fifteen'、
  // スナップショットのシリアライザー
  snapshotSerializers: [ // スナップショット設定 'jest-serializer-vue'
  ]、
  testMatch: [ // デフォルトのテストファイル '**/tests/unit/**/*.spec.[jt]s?(x)',
    '**/__テスト__/*.[jt]s?(x)'
  ]、
  // https://github.com/facebook/jest/issues/6766
  テストURL: 'http://localhost/',
  ウォッチプラグイン: [
    require.resolve('jest-watch-typeahead/ファイル名')、
    require.resolve('jest-watch-typeahead/テスト名')
  ]、
  グローバル:
    'ts-jest': {
      バベル設定: true
    }
  }
}

これらのうち、より重要な構成は、問題を解決するためにより多く使用される構成でもあります。

  • moduleFileExtensions: テストするファイルの種類。ここでのデフォルト設定は基本的にすべてのファイルの種類をカバーしているため、通常は変更する必要はありません。
  • transform : 変換方法。一致するファイルは認識される前に翻訳される必要があります。そうでない場合はエラーが報告されます。
  • transformIgnorePatterns : 変換無視設定
  • moduleNameMapper: モジュールのエイリアス。使用されている場合は入力します。

よくある間違い

SyntaxError: 構文エラー。おそらく、次のプロンプトのように、変換が行われていないことが原因です。

 /Users/zhuangbing.cai/Documents/workspace/projects/wms-ui/node_modules/vue-runtime-helpers/dist/normalize-component.mjs:76
    デフォルトの normalizeComponent をエクスポートします。
    ^^^^^^

    構文エラー: 予期しないトークン 'export'

.mjsファイルを変換しなかったため、エラーが発生しました。最も早い解決策は、transformに.mjs変換を追加することです。

変身:
     '^.+\\.mjs$': 'バベルの冗談'
}

.mjs ファイルの変換方法を指定するだけです。

別の種類の構文エラーは、node_module 内の一部のファイルを変換する必要があるが、transformIgnorePatterns 構成によって無視されるというものです。

    次のことが可能です:
     • 「node_modules」ファイルの一部を変換するには、設定でカスタム「transformIgnorePatterns」を指定します。
     • カスタム変換が必要な場合は、設定で「transform」オプションを指定します。
     • JS 以外のモジュール (バイナリ アセットなど) を単にモック化したい場合は、「moduleNameMapper」構成オプションを使用してスタブ化できます。

    これらの設定オプションの詳細と例については、次のドキュメントを参照してください。
    詳しくはこちら

    詳細:

    /Users/zhuangbing.cai/Documents/workspace/projects/wms-ui/node_modules/vue-runtime-helpers/dist/normalize-component.mjs:76
    デフォルトの normalizeComponent をエクスポートします。
    ^^^^^^

    構文エラー: 予期しないトークン 'export'

図ではvue-runtime-helpersを使用していますが、transformIgnorePatternsの設定により変換が無視されるため、構文エラーが発生します。解決策は、transformIgnorePatterns の構成を次のように変更することです。

変換無視パターン: [
    // 変換時に node_modules を無視しますが、vue-runtime-helpers は含めません
    '/node_modules/(?!(vue-runtime-helpers)/)',
  ]、

vue-runtime-helpers を除外すると、変換中に無視されなくなり、構文エラーの問題が解決されます。

Ts のタイプが間違っています

 TypeScript 診断 (`[jest-config].globals.ts-jest.diagnostics` オプションを使用してカスタマイズ):
    src/views/inventory-map/__tests__/available.spec.ts:15:1 - エラー TS2304: 名前 'beforeEach' が見つかりません。

    15 beforeEach(() => {
       ~~~~~~~~~~
    src/views/inventory-map/__tests__/available.spec.ts:19:1 - エラー TS2593: 名前 'describe' が見つかりません。テスト ランナーの型定義をインストールする必要がありますか? `npm i @types/jest` または `npm i @types/mocha` を試してから、tsconfig の types フィールドに `jest` または `mocha` を追加してください。

    19 記述('在庫マップ', () => {
       ~~~~~~~~
    src/views/inventory-map/__tests__/available.spec.ts:20:3 - エラー TS2593: 名前 'it' が見つかりません。テスト ランナーの型定義をインストールする必要がありますか? `npm i @types/jest` または `npm i @types/mocha` を試してから、tsconfig の types フィールドに `jest` または `mocha` を追加してください。

プロンプトに従って、tscofig.jsonに追加する必要があります

{
    "コンパイラオプション": {
    "種類": [
      "webpack-env",
      "冗談"
    ]、
  }
}

事前テスト作業

テストケースを書く前に、Jest がコンポーネントインスタンス vm とレンダリングされた DOM 構造を提供する必要があります。コード ロジックとページ効果の二重テストを確実に実行するために、このビジネス コンポーネントを取得するにはどうすればよいでしょうか?

ビジネス コンポーネントには、UI コンポーネント ライブラリ、ツール関数、Vuex ステータスなど、多くの依存関係が必要なため、コンポーネントを直接参照することはできません。そのため、まずこれらの依存関係を処理する必要があります。

依存関係の扱い

まず、テストするビジネス コンポーネントが何に依存しているかを知る必要があります。グローバル依存関係は main.ts または main.js エントリ ファイルで確認でき、その他の依存関係はコンポーネント内の参照に基づいて決定できます。依存関係を取得した後、Jest でコンポーネント インスタンスを取得するにはどうすればよいでしょうか?

Vue は、テストケースの作成時に使用できるユニット テスト ユーティリティ ライブラリである Vue Test Utils を提供します。まず、createLocalVue を使用して Vue クラスを作成し、グローバル Vue クラスを汚染することなくコンポーネント、ミックスイン、プラグインのインストールを追加してから、依存関係を参照します。

_localVue をインスタンス化します。
_localVue.use(Vuex);
_localVue.use(UI);
_localVue.use(i18nインストール);
_localVue.component('s-filter', SFilter);
_localVue.component('w-table', WTable);
_localVue.directive('xxx', {
  挿入: (el, バインディング) => {
    ....
  },
});
エクスポート const localVue = _localVue;

このようにして、依存関係を含むVueクラスを取得し、Vuexを扱います。たとえば、列挙値が必要です。

'./enums' から列挙型をインポートします。
エクスポートconst systemStore = new Vuex.Store({
  アクション: {},
  州: {
    列挙型: {
      systemEnums: 列挙型、
    },
  },
});

インスタンスとDOMを生成する

localVue と store を取得したら、それを使用して結果を生成し、マウントを通じてコン​​ポーネントをレンダリングする必要があります。

'@/utils/unit-test/common' から localVue、systemStore をインポートします。
'@vue/test-utils' から { mount } をインポートします。
require('intersection-observer'); // jsdom と互換性がありますが、IntersectionObserver はサポートしていません
import TaskList from '../available-inventory-map/index.vue'; // テスト対象のビジネスを参照します let store: any;
それぞれの前に(() => {
  ストア = systemStore;
});

'在庫マップ' を記述します () => {
  it('フィルター項目テスト', () => {
    レンダラーを作成します。
    const wrapper = mount(TaskList, {
      ローカルビュー、
      店、
      ドキュメントに添付: true、
    });
    const html = wrapper.html(); // 完全な HTML 構造を取得します。const vm = wrapper.vm; // コンポーネント インスタンス console.log(html, vm);
  })
}

最終的にインスタンスとその DOM 構造を取得するために、LocalVue とストアがマウントされます。次に、インスタンスと DOM に基づいて独自のテスト ケースを記述できます。

要約する

この記事では主に、Vue + Ts プロジェクトで Jest 自動テストを構成する際に発生する問題の概要、基本的な構成と一般的なエラーの解決策、テスト ケースの作成を開始する前に完全なコンポーネント情報と DOM を取得する方法について説明します。後続のユースケース作成の基礎を築きます。

参考文献

Vue テストユーティリティ

Vue-Jest 自動テストの基本の詳細設定に関するこの記事はこれで終わりです。Vue-Jest 自動テストに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue はどのようにしてテスト環境と正式な環境の dist/test ファイルを自動的にパッケージ化するのか

<<:  VMWare15 は Mac OS システムをインストールします (グラフィック チュートリアル)

>>:  MySQL テーブル全体の暗号化ソリューション keyring_file の詳細な説明

推薦する

Linux仮想マシンの静的IPアドレスを構成するための手順を完了します

序文多くの場合、仮想マシンを使用します。たとえば、一部のテストは検出されません。何かを壊すことを心配...

Mysql インデックスと Redis ジャンプテーブルについての簡単な説明

まとめインタビュー中、MySQL インデックスの問題について議論しているときに、B+ ツリー、B ツ...

最新の人気スクリプトAutojsソースコード共有

今日は、最新の人気スクリプト 50 個を含むソース コードを共有します。現在、Mine Guard ...

Nginx キャッシュ設定例

Web アプリケーションの開発とデバッグを行う際には、テストのためにブラウザのキャッシュをクリアした...

Docker を使用した Laravel アプリケーションのデプロイ例

この記事で使用されているPHPベースイメージはphp:7.3-apacheです。この記事の Lara...

html オプション 無効 選択 選択 無効 オプションの例

コードをコピーコードは次のとおりです。 <選択> <オプション値="&q...

Docker に nginx をインストールし、https 経由でアクセスを構成する方法

1. 最新のnginx dockerイメージをダウンロードする $ docker pull ngin...

ドメイン名を指定されたポートに転送するようにNginxを設定する方法

/usr/local/nginx/conf と入力する sudo cd /usr/local/ngi...

Vue3 の参照と参照の詳細

エディターは、Vue3のデータの関連する問題も共有します。次のような例を見てみましょう。 Vue.c...

IDEA を使用して Tomcat を設定し、JSP ファイルを作成する方法

idea を使用して JSP ファイルを書き込む前に、jdk 環境 (ここでは説明しません) と対応...

Vue 開発者向けの VSCode 拡張機能ベスト 7

適切な VS Code 拡張機能を Visual Studio に追加すると、開発者としての作業がは...

Vue カプセル化コンポーネント アップロード画像コンポーネント

この記事の例では、参考のためにvueアップロード画像コンポーネントの具体的なコードを共有しています。...

sql_mode を変更する際の MySQL エラーの解決方法

目次ERR 1067による殺人事件2番目の問題の原因はsql_modeです3. sql_modeを設...

MySQL 5.7.21 winx64 無料インストールバージョン設定方法グラフィックチュートリアル

MySQL 5.7.21 winx64無料インストールバージョンの設定方法、参考までに、具体的な内容...

画像ソーシャルネットワーキングサイトのUIアプリケーションの比較分析(図)

私たちの生活、仕事、勉強において、ソーシャル ネットワークは徐々に将来のインターネット発展のトレンド...