1. ユニットテストはなぜ必要なのでしょうか?ユニット テストは、関数、クラス、コンポーネントなど、プロジェクト内のモジュールの機能をテストするために使用されます。ユニットテストの機能は次のとおりです。
2. ユニットテストの書き方テストの原則
書き方の手順
3. テストツールユニット テスト ツールは、次の 3 つのカテゴリに分けられます。
ここでは、Jest を例として使用します。 Jest は包括的で、さまざまなツールを統合しており、設定が簡単で、設定なしで直接使用することもできます。 4. Jest を使い始めるJestの公式サイトでの説明は次のとおりです。
インストール糸を追加 --dev ジェスト # または # npm インストール -D ジェスト 簡単な例公式ウェブサイトで提供されている例から始めて、2 つの数値を加算する関数をテストし、sum.js ファイルを作成します。 関数 sum(a, b) { a + b を返します。 } モジュールのエクスポートの合計。 次に、sum.test.js ファイルを作成します。 const sum = require('./sum'); test('1 + 2 を足すと 3 になる', () => { 期待値(合計(1, 2))toBe(3); }); package.json にテスト タスクを追加します。 { 「スクリプト」: { 「テスト」: 「冗談」 } } 最後に、 yarn test または npm run test を実行すると、Jest は次のメッセージを出力します。
この時点で、基本的な単体テストは完了です。 注: Jest は JSDOM を使用して、Node 仮想ブラウザ環境で実際のブラウザをシミュレートします。DOM は js でシミュレートされるため、Jest はスタイルをテストできません。 Jest テスト ランナーは JSDOM を自動的にセットアップします。 ジェストクリコマンドラインから Jest を直接実行し (jest がすでに PATH 内にあると想定、たとえば yarn global add jest または npm install jest --global 経由)、さまざまな便利な構成オプションを指定できます。のように: jest my-test --notify --config=config.json Jest コマンドには次の共通パラメータがあります。
その他のオプションについては、Jest CLI オプションを参照してください。 設定ファイルの使用jest コマンドを使用して設定ファイルを生成します。 ジェスト --init いくつかのオプションから選択できます:
設定ファイルの例 (上記の選択に基づかない): // jest.config.js 定数パス = require('path') モジュール.エクスポート = { プリセット: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel', ルートディレクトリ: path.resolve(__dirname, './'), カバレッジディレクトリ: '<rootDir>/tests/unit/coverage', 収集範囲: [ 'src/*.{js,ts,vue}', 'src/directives/*.{js,ts,vue}', 'src/filters/*.{js,ts,vue}', 'src/helper/*.{js,ts,vue}', 'src/views/**/*.{js,ts,vue}', 'src/services/*.{js,ts,vue}' ] } Babelの使用yarn を追加 --dev babel-jest @babel/core @babel/preset-env プロジェクトのルート ディレクトリに babel.config.js ファイルを作成して、現在の Node バージョンと互換性のある Babel を設定できます。 // babel.config.js モジュール.エクスポート = { プリセット: [['@babel/preset-env', {targets: {node: 'current'}}]], }; vue-cli で Jest を使用するvue-cli で Jest を使用するには、プロジェクトに @vue/cli-plugin-unit-jest プラグインをインストールします。 vue ユニットを追加-jest # または # yarn add -D @vue/cli-plugin-unit-jest @types/jest 「スクリプト」: { "テスト:ユニット": "vue-cli-service テスト:ユニット --coverage" }, @vue/cli-plugin-unit-jest は、vue-cli-service に test:unit コマンドを挿入し、デフォルトで次のファイルを認識します: <rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)) は、ユニットテスト (tests/unit ディレクトリ内の .spec.(js|jsx|ts|tsx) で終わるファイルと、__tests__ という名前のディレクトリ内のすべての js(x)/ts(x) ファイル) を実行します。 一般的な例値が等しいと判断するtoBe() は、2 つのプリミティブ型が完全に一致するかどうかをチェックします。 test('2 + 2 は 4', () => { 期待値(2 + 2)が4になる; }); toEqual() はオブジェクトが等しいかどうかをチェックします: test('オブジェクトの割り当て', () => { 定数データ = {1:1}; データ['2'] = 2; データ.toEqual({1: 1、2: 2}) を期待します。 }); 誤った値をチェックする
例: テスト('null', () => { 定数 n = null; (n).toBeNull() を期待します。 期待(n).toBeDefined(); (n) が未定義でないことを予想します。 期待(n)。真実ではない(); 期待値nは偽です。 }); テスト('ゼロ', () => { 定数z = 0; (z) が Null でないことを予想します。 期待(z).toBeDefined(); 期待(z).not.toBeUndefined(); 期待(z).not.toBeTruthy(); 期待値(z).toBeFalsy(); }); 数字の比較test('2プラス2', () => { 定数値 = 2 + 2; 期待値(値)が3より大きい場合; 期待値。3.5より大きいか等しい。 期待値。toBeLessThan(5); 期待値。4.5未満です。 // toBe と toEqual は数値の場合同等です 期待値(値)が4である。 期待値.toEqual(4); }); 浮動小数点数の等価性を比較する場合は、小さな丸め誤差に依存したテストを行わないようにするため、toEqual ではなく toBeCloseTo を使用します。 test('2つの浮動小数点数を加算する', () => { 定数値 = 0.1 + 0.2; //expect(value).toBe(0.3); 浮動小数点数には丸め誤差があるため、エラーが発生します。expect(value).toBeCloseTo(0.3); // これは機能します }); 文字列の比較正規表現を使用して次のことを確認できます: test('チームにはIは存在しません', () => { 'team' が /I/ と一致しないことを予想します。 }); test('しかし、Christoph には「stop」があります', () => { 'Christoph' が期待される。toMatch(/stop/); }); 配列と配列のようなtoContain を使用すると、配列または反復可能オブジェクトに特定の項目が含まれているかどうかを確認できます。 const ショッピングリスト = [ 「おむつ」、 「クリネックス」、 「ゴミ袋」 「ペーパータオル」 '牛乳'、 ]; test('買い物リストに牛乳が載っている', () => { expect(shoppingList).toContain('ミルク'); 新しい Set(shoppingList) を期待します。toContain('ミルク'); }); 異常な関数が例外をスローするかどうかを確認するためにも使用できます。 関数compileAndroidCode() { throw new Error('間違った JDK を使用しています'); } test('Android のコンパイルは期待どおりに実行されます', () => { 期待します(() => compileAndroidCode()).toThrow(); 期待します(() => compileAndroidCode()).toThrow(Error); // 正確なエラーメッセージや正規表現を使用することもできます expect(() => compileAndroidCode()).toThrow('間違った JDK を使用しています'); 期待します(() => compileAndroidCode()).toThrow(/JDK/); }); 詳細な使用方法については、API ドキュメントを参照してください。 現在のテストのみを実行するonly() メソッドを使用すると、このテストのみが実行されることを示すことができ、不要な繰り返しテストを減らすことができます。 test.only('雨が降っています', () => { 予想(inchesOfRain()).toBeGreaterThan(0); }); test('雪は降っていません', () => { 期待値(inchesOfSnow())は0です。 }); 非同期コードのテストコールバック関数たとえば、データを取得し、完了したら callback(data) を呼び出す fetchData(callback) 関数があるとします。 返されるデータは文字列「ピーナッツバター」になるはずです。 test('データはピーナッツバターです', done => { 関数コールバック(データ) { 試す { expect(data).toBe('ピーナッツバター'); 終わり(); } キャッチ(エラー){ 完了(エラー); } } fetchData(コールバック); }); Done() は、テストの完了をマークするために使用されます。done() がないと、コールバックが呼び出されず、ユニット テストが完了していないため、ユニット テストはテストの完了後に終了しますが、これは期待どおりではありません。 done() 関数が呼び出されない場合は、タイムアウト エラーが報告されます。 expect の実行に失敗した場合はエラーがスローされ、後続の done() は実行されません。 テスト ケースが失敗した理由を知りたい場合は、try に expect を配置し、catch の done 関数にエラーを渡す必要があります。 そうしないと、コンソールにタイムアウト エラーが表示され、expect(data) で受信した値が表示されなくなります。 約束上記の例を引き続き使用します。 test('データはピーナッツバターです', () => { fetchData() を返します。その後、data => { expect(data).toBe('ピーナッツバター'); }); }); テストと関数が同時に完了するように、結果を返すことを忘れないでください。 test('フェッチはエラーで失敗しました', () => { 期待アサーション(1); fetchData() を返します。catch(e => expect(e).toMatch('error')); }); 解決マッチャーと拒否マッチャーを使用することもできます。 test('データはピーナッツバターです', () => { expect(fetchData()).resolves.toBe('ピーナッツバター'); を返します。 }); test('フェッチはエラーで失敗しました', () => { expect(fetchData()).rejects.toMatch('error'); を返します。 }); 非同期/待機test('データはピーナッツバターです', async () => { const データ = fetchData() を待機します。 expect(data).toBe('ピーナッツバター'); }); test('フェッチはエラーで失敗しました', async () => { 期待アサーション(1); 試す { fetchData() を待機します。 } キャッチ (e) { 期待(e).toMatch('error'); } }); async/await は、resolves()/rejects() と組み合わせて使用することもできます。 test('データはピーナッツバターです', async () => { 待機 expect(fetchData()).resolves.toBe('ピーナッツバター'); }); test('フェッチはエラーで失敗しました', async () => { 期待(fetchData()).rejects.toMatch('error');を待機します。 }); 取り付けと取り外しテスト前とテスト後場合によっては、テストを開始する前に何らかの準備を行い、テストが完了した後に何らかのクリーンアップを行う必要があります。beforeEach と afterEach を使用できます。 それぞれの前に(() => { CityDatabase を初期化します。 }); afterEach(() => { CityDatabase をクリアします。 }); test('都市データベースにはウィーンがあります', () => { expect(isCity('ウィーン')).toBeTruthy(); }); test('都市データベースにサンファンが含まれています', () => { expect(isCity('San Juan')).toBeTruthy(); }); 同様のメソッドには beforeAll と afterAll があり、これらは現在の仕様テスト ファイルの開始前と終了前に 1 回ずつ実行されます。 テストケースのグループ化デフォルトでは、before ブロックと after ブロックはファイル内のすべてのテストに適用されます。 さらに、describe ブロックを使用してテストをグループ化することもできます。 before ブロックと after ブロックが describe ブロック内にある場合、それらはその describe ブロック内のテストにのみ適用されます。 // このファイル内のすべてのテストに適用されます それぞれの前に(() => { 初期化CityDatabase() を返します。 }); test('都市データベースにはウィーンがあります', () => { expect(isCity('ウィーン')).toBeTruthy(); }); test('都市データベースにサンファンが含まれています', () => { expect(isCity('San Juan')).toBeTruthy(); }); describe('都市と食べ物のマッチング', () => { // この記述ブロック内のテストにのみ適用されます それぞれの前に(() => { 戻り値はinitializeFoodDatabase()です。 }); test('ウィーン<3ソーセージ', () => { expect(isValidCityFoodPair('ウィーン', 'ウィーナー・ヴュルスト')).toBe(true); }); test('サンファン <3 プランテーン', () => { expect(isValidCityFoodPair('San Juan', 'Mofongo')).toBe(true); }); }); 実行命令describe はグループ化に使用されるため、ネストされたスコープが存在します。各ライフサイクルの実行順序は次のとおりです。
beforeAll(() => console.log('1 - beforeAll')); afterAll(() => console.log('1 - afterAll')); beforeEach(() => console.log('1 - beforeEach')); afterEach(() => console.log('1 - afterEach')); テスト('', () => console.log('1 - テスト')); describe('スコープ付き/ネストされたブロック', () => { beforeAll(() => console.log('2 - beforeAll')); afterAll(() => console.log('2 - afterAll')); beforeEach(() => console.log('2 - beforeEach')); afterEach(() => console.log('2 - afterEach')); テスト('', () => console.log('2 - テスト')); }); // 1 - すべて前 // 1 - 各前 // 1 - テスト // 1 - afterEach // 2 - すべて前 // 1 - 各前 // 2 - 各前 // 2 - テスト // 2 - afterEach // 1 - afterEach // 2 - すべて後 // 1 - すべて後 モック関数jest.fn() を使用すると、モック関数を生成できます。Jest は、この関数の呼び出し、this、戻り値などをキャプチャできるため、コールバック関数をテストするときに非常に便利です。 モックのテスト渡された配列内の各要素に対してコールバック関数を 1 回呼び出す forEach 関数の内部実装をテストするとします。 関数 forEach(items, コールバック) { for (let index = 0; index < items.length; index++) { コールバック(items[インデックス]); } } この関数をテストするには、モック関数を使用し、モック関数の状態をチェックして、コールバック関数が期待どおりに呼び出されることを確認できます。 const mockCallback = jest.fn(x => 42 + x); forEach([0, 1], モックコールバック); // このモック関数は2回呼び出されます。expect(mockCallback.mock.calls.length).toBe(2); // 関数が初めて呼び出されたときの最初のパラメータは0です 期待値(mockCallback.mock.calls[0][0]).toBe(0); // 関数を2回目に呼び出すときの最初のパラメータは1です 期待値(mockCallback.mock.calls[1][0]).toBe(1); // 最初の関数呼び出しの戻り値は42です mockCallback.mock.results[0].value).toBe(42) を期待します。 モック戻り値モック関数は、テスト中にコードにテスト値を挿入するためにも使用できます。 const myMock = jest.fn(); コンソールにログ出力します。 // > 未定義 myMock.mockReturnValueOnce(10).mockReturnValueOnce('x').mockReturnValue(true); コンソールにログ出力します。 // > 10, 'x', 真, 真 シミュレーションインターフェースの戻りAPI からユーザーを取得するクラスがあると仮定します。 このクラスは axios を使用して API を呼び出し、すべてのユーザーの属性を含むデータを返します。 // ユーザー.js 'axios' から axios をインポートします。 クラスユーザー{ 静的オール() { axios.get('/users.json').then(resp => resp.data); を返します。 } } デフォルトのユーザーをエクスポートします。 ここで、実際に API を呼び出さずにこのメソッドをテストするには (テストが遅くなり、不安定になります)、jest.mock(...) 関数を使用して axios モジュールを自動的にモックします。モジュールがモック化されたら、テスト用の偽のデータを返す mockResolvedValue を .get に提供できます。 // ユーザー.テスト.js 'axios' から axios をインポートします。 './users' からユーザーをインポートします。 jest.mock('axios'); test('ユーザーを取得する必要があります', () => { ユーザーの名前を 'Bob' にします。 const resp = {データ: ユーザー}; axios.get.mockResolvedValue(resp); // または、ユースケースに応じて以下を使用することもできます。 // axios.get.mockImplementation(() => Promise.resolve(resp)) Users.all() を返します。その後 (data => expect(data).toEqual(users)); }); モック関数マッチャーmock 関数を使用すると、関数にいくつかのカスタム マッチャーを追加できます。 // モック関数は少なくとも1回呼び出されました 期待する(mockFunc).toHaveBeenCalled(); // モック関数は指定された引数で少なくとも1回呼び出されました mockFunc.toHaveBeenCalledWith(arg1, arg2) を期待します。 // モック関数への最後の呼び出しは指定された引数で呼び出されました mockFunc.toHaveBeenLastCalledWith(arg1, arg2) を期待します。 // すべての呼び出しとモックの名前はスナップショットとして書き込まれます (mockFunc).toMatchSnapshot() を期待します。 ネイティブ マッチャーを使用して自分でシミュレートすることもできます。次のコードは上記と同等です。 // モック関数は少なくとも1回呼び出されました mockFunc.mock.calls.length.toBeGreaterThan(0) を期待します。 // モック関数は指定された引数で少なくとも1回呼び出されました mockFunc.mock.calls).toContainEqual([arg1, arg2]) を期待します。 // モック関数への最後の呼び出しは指定された引数で呼び出されました 期待(mockFunc.mock.calls[mockFunc.mock.calls.length - 1]).toEqual([ 引数1、 引数2、 ]); // モック関数の最後の呼び出しの最初の引数は `42` でした // (この特定のアサーションにはシュガーヘルパーが存在しないことに注意してください) 期待値(mockFunc.mock.calls[mockFunc.mock.calls.length - 1][0]).toBe(42); // スナップショットは、モックが同じ回数呼び出されたかどうかをチェックします。 // 同じ順序、同じ引数で。 mockFunc.mock.calls).toEqual([[arg1, arg2]]) を期待します。 expect(mockFunc.getMockName()).toBe('モック名'); Vue テストユーティリティ公式サイトでは、Vue Test Utils を次のように紹介しています。
以下の例は、webpack/babel/vue-loaderを含むvue-cliスキャフォールディングに基づいています。 単一ファイルコンポーネントのテストVue の単一ファイル コンポーネントは、Node またはブラウザーで実行する前に事前にコンパイルする必要があります。これを実現するには、Jest プリコンパイラを使用するか、webpack を直接使用するという 2 つの方法をお勧めします。ここでは Jest アプローチを選択します。 糸を追加 -D jest @vue/test-utils vue-jest vue-jest は現在、カスタム ブロックやスタイルの読み込みなど、vue-loader のすべての機能をサポートしていません。さらに、コード分離などの webpack 固有の機能もサポートされていません。これらのサポートされていない機能を使用するには、Jest ではなく Mocha を使用してテストを実行し、webpack を使用してコンポーネントをコンパイルする必要があります。 webpackエイリアスの扱いデフォルトでは、vue-cli は /src のエイリアスとして @ を使用するため、Jest でもこれを個別に設定する必要があります。 // jest.config.js モジュール.エクスポート = { モジュール名マッパー: { '^@/(.*)$': '<ルートディレクトリ>/src/$1' } } 取り付け部品マウントされたコンポーネントはラッパーに返され、その内部の Vue コンポーネント インスタンスをカプセル化、トラバース、およびクエリするための便利なメソッドが多数公開されます。 //テスト // test-utils ライブラリから `mount()` メソッドをインポートします // テストするコンポーネントをインポートします import { mount } from '@vue/test-utils' './counter' から Counter をインポートします。 // コンポーネントをマウントするとラッパーが取得されます。const wrapper = mount(Counter) // 実際の Vue インスタンスには `wrapper.vm` 経由でアクセスできます。const vm = wrapper.vm // ラッパーを詳しく確認するにはコンソールにログを記録します // Vue Test Utils の調査はここから始まります console.log(wrapper) マウント中に、コンポーネントのさまざまなプロパティを設定できます。 const wrapper = mount(Counter, { ローカルビュー、 データ() { 戻る { バー: 'my-override' } }, プロパティデータ: { メッセージ: 'abc' }, parentComponent: Foo, // 親コンポーネントを指定する provide: { 関数foo(){ 'fooValue' を返す } } }) コンポーネントによってレンダリングされたHTMLをテストするラッパーの関連メソッドを使用して、コンポーネントによってレンダリングされた HTML が期待どおりであるかどうかを判断します。 '@vue/test-utils' から { mount } をインポートします。 './counter' から Counter をインポートします。 記述('カウンター', () => { // コンポーネントをマウントするとラッパーが取得されます。const wrapper = mount(Counter) test('正しいマークアップをレンダリングします', () => { 期待(wrapper.html()).toContain('<span class="count">0</span>') }) // 既存の要素を確認するのにも便利です test('ボタンがある', () => { wrapper.contains('button')).toBe(true) を期待します }) }) ユーザーアクションをシミュレートするユーザーがボタンをクリックすると、カウンターが増加します。この動作をシミュレートするには、まず、ボタン要素のラッパーを返す wrapper.find() を使用してボタンを見つける必要があります。次に、ボタン ラッパーで .trigger() を呼び出すことでクリックをシミュレートできます。 it('ボタンをクリックするとカウントが増加する', () => { 期待値(wrapper.vm.count).toBe(0) const ボタン = wrapper.find('ボタン') button.trigger('クリック') 期待値(wrapper.vm.count).toBe(1) }) カウンター内のテキストが更新されたかどうかをテストするには、nextTick について知っておく必要があります。 DOM の操作につながる変更はすべて、アサーションの前に nextTick を待機する必要があります。 it('ボタンをクリックするとカウントテキストが増加する', async () => { 期待(wrapper.text()).toContain('0') const ボタン = wrapper.find('ボタン') ボタンのトリガー('クリック')を待機します。 期待(wrapper.text()).toContain('1') }) コンポーネントイベントマウントされた各ラッパーは、その背後にある Vue インスタンスによって発生したすべてのイベントを自動的にログに記録します。 wrapper.emitted() メソッドを使用してこれらのイベント レコードを取得できます。 wrapper.vm.$emit('foo') wrapper.vm.$emit('foo', 123) /* `wrapper.emitted()` は次のオブジェクトを返します。 { : [[], [123]] } */ このデータに基づいてアサーションを設定できます。 // イベントが発行されたことをアサートする expect(wrapper.emitted().foo).toBeTruthy() // イベントの数をアサートする expect(wrapper.emitted().foo.length).toBe(2) // イベントに有効なデータがあることを確認する expect(wrapper.emitted().foo[1]).toEqual([123]) サブコンポーネントでイベントをトリガーすることもできます。 '@vue/test-utils' から { mount } をインポートします。 '@/components/ParentComponent' から ParentComponent をインポートします。 '@/components/ChildComponent' から ChildComponent をインポートします。 記述('親コンポーネント', () => { test("カスタムイベントが発行されたときに「発行されました!」と表示されます", () => { const wrapper = mount(ParentComponent) wrapper.find(ChildComponent).vm.$emit('custom') expect(wrapper.html()).toContain('発行されました!') }) }) コンポーネントデータコンポーネントの状態データを設定するには、setData() または setProps を使用できます。 it('状態を操作する', async () => { wrapper.setData({ count: 10 }) を待機します。 wrapper.setProps({ foo: 'bar' }) を待機します。 }) VueインスタンスメソッドをシミュレートするVue Test Utils の setMethods() は廃止される予定なので、Vue インスタンス メソッドをシミュレートするには jest.spyOn() メソッドを使用することをお勧めします。 '@/components/MyComponent.vue' から MyComponent をインポートします。 記述('MyComponent', () => { it('クリックすると何かが起きる', async () => { const mockMethod = jest.spyOn(MyComponent.methods, 'doSomething') shallowMount(MyComponent).find('button').trigger('click') を待ちます。 期待(mockMethod).toHaveBeenCalled() }) }) グローバルプラグインすべてのテストで使用されるグローバル プラグインをインストールする必要がある場合は、setupFiles を使用して、最初に jest.config.js でセットアップ ファイルを指定します。 // jest.config.js モジュール.エクスポート = { セットアップファイル: ['<rootDir>/tests/unit/setup.js'] } 次に、setup.js でそれを使用します。 // セットアップ.js 'vue' から Vue をインポートします // 以下のグローバルに登録されたプラグインは Jest では動作しないため、localVue を使用する必要があります 'element-ui' から ElementUI をインポートします。 'vue-clipboard2' から VueClipboard をインポートします。 Vue.use(要素UI) Vue.use(Vueクリップボード) Vue.config.productionTip = false いくつかのテストにグローバル プラグインをインストールしたいだけの場合は、一時的な Vue インスタンスを作成する localVue を使用できます。 '@vue/test-utils' から { createLocalVue, mount } をインポートします。 // 拡張された `Vue` コンストラクタを作成する const localVue = createLocalVue() // プラグインを通常どおりインストールします localVue.use(MyPlugin) // マウントオプションに `localVue` を渡す マウント(コンポーネント、{ ローカルビュー }) テストウォッチ次のようなウォッチャーがあるとします。 時計: 入力値(新しい値、古い値) { (newVal.trim().length && newVal !== oldVal) の場合 { コンソールログ(新しい値) } } } ウォッチ呼び出しは非同期であり、次のティックまで呼び出されないため、jest.spyOn() メソッドを使用してウォッチャー内のメソッドが呼び出されたかどうかを検出することで、ウォッチが有効かどうかを検出できます。 記述('Form.test.js', () => { CMPをさせる ... describe('ウォッチャー - inputValue', () => { スパイさせて beforeAll(() => { スパイ = jest.spyOn(コンソール、'ログ') }) afterEach(() => { spy.mockClear() }) it('値が空の場合は呼び出されません(トリムされています)', () => { }) it('値が同じ場合は呼び出されません', () => { }) it('その他の場合には新しい値で呼び出されます', () => { }) }) }) it("その他の場合には新しい値で呼び出されます", done => { cmp.vm.inputValue = "foo"; cmp.vm.$nextTick(() => { 期待(スパイ).toBeCalled(); 終わり(); }); }); サードパーティのプラグインサードパーティのプラグインを使用する場合、通常は内部実装を気にする必要はなく、コンポーネントをテストする必要もありません。不要なレンダリングを減らすために、mount の代わりに shallowMount を使用できます。 '@vue/test-utils' から { shallowMount } をインポートします。 const wrapper = shallowMount(コンポーネント) wrapper.vm // マウントされた Vue インスタンスは findAllComponents を通じてサードパーティのコンポーネントを見つけることもできます。 'element-ui' から {Select} をインポートします test('本社を選択すると支店や店舗は表示されません', async () => { wrapper.setProps({を待つ 価値: { クラスタータイプ: 'head-quarter-sit'、 支店: ''、 サイト: '' } }) // 本社には支店や店舗は表示されません expect(wrapper.findAllComponents(Select)).toHaveLength(1) }) VI. 結論ユニットテスト理論
冗談
Vue テストユーティリティ
これで、フロントエンド Vue ユニットテストの入門チュートリアルの記事は終了です。Vue ユニットテストに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: display:olck/none を使用してメニューバーを作成する方法
この記事では、centos7 システムの nginx サーバーの下に phalcon 環境を構築する...
目次CentOS7環境での設定コマンド手順1. DHCP設定ファイルを設定する2. グローバル構成を...
Vueカードのフリップカルーセル表示、フリップ時にデータを切り替えながら、参考までに、具体的な内容は...
証券会社にいた頃、設計業務が忙しくなかったため、商品のマニュアルを書く役割を担ったことがありました。...
1. 単一マシン環境の構築# 1.1 ダウンロードZookeeper の対応するバージョンをダウンロ...
この記事の例では、ログインフォームを実装するためのJavaScriptの具体的なコードを参考までに共...
目次序文v-model の修飾子:怠け者トリム番号さまざまな入力タイプやその他の要素での v-mod...
MySQLとElasticsearch間のデータ非対称性問題の解決策jdbc-input-plugi...
1. HTMLタグの前に次のような文を追加するのが最適です。 <!DOCTYPE HTML P...
目次1. DATETIMEとTIMESTAMPの使用1. 類似点2. 相違点3. 選択2. varc...
この記事では、簡単なドラッグ効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...
<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...
たくさん集めましたが、すべて失敗に終わりました。最終的に、この方法は優れており、使用に影響を与えない...
<スタイル タイプ="text/css">コードをコピーコードは次の...
目次概要ボタンレベルの権限アイデンティティ認証管理R/U 権限権限の更新テナント管理テナント切り替え...