フロントエンド Vue ユニットテストを始める

糸を追加 --dev ジェスト
＃ または
# npm インストール -D ジェスト

関数 sum(a, b) {
  a + b を返します。
}
モジュールのエクスポートの合計。

const sum = require('./sum');

test('1 + 2 を足すと 3 になる', () => {
  期待値(合計(1, 2))toBe(3);
});

package.json にテスト タスクを追加します。
{
  「スクリプト」: {
    「テスト」: 「冗談」
  }
}

jest my-test --notify --config=config.json

ジェスト --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}'
    ]
}

yarn を追加 --dev babel-jest @babel/core @babel/preset-env

// babel.config.js
モジュール.エクスポート = {
  プリセット: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

vue ユニットを追加-jest
＃ または
# yarn add -D @vue/cli-plugin-unit-jest @types/jest

「スクリプト」: {
    "テスト:ユニット": "vue-cli-service テスト:ユニット --coverage"
},

test('2 + 2 は 4', () => {
  期待値(2 + 2)が4になる;
});

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);
});

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/);
});

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/);
});

test.only('雨が降っています', () => {
  予想(inchesOfRain()).toBeGreaterThan(0);
});

test('雪は降っていません', () => {
  期待値(inchesOfSnow())は0です。
});

test('データはピーナッツバターです', done => {
  関数コールバック(データ) {
    試す {
      expect(data).toBe('ピーナッツバター');
      終わり（）;
    } キャッチ（エラー）{
      完了(エラー);
    }
  }

  fetchData(コールバック);
});

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');
  }
});

test('データはピーナッツバターです', async () => {
  待機 expect(fetchData()).resolves.toBe('ピーナッツバター');
});

test('フェッチはエラーで失敗しました', async () => {
  期待(fetchData()).rejects.toMatch('error');を待機します。
});

それぞれの前に(() => {
  CityDatabase を初期化します。
});

afterEach(() => {
  CityDatabase をクリアします。
});

test('都市データベースにはウィーンがあります', () => {
  expect(isCity('ウィーン')).toBeTruthy();
});

test('都市データベースにサンファンが含まれています', () => {
  expect(isCity('San Juan')).toBeTruthy();
});

// このファイル内のすべてのテストに適用されます
それぞれの前に(() => {
  初期化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);
  });
});

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 - すべて後

関数 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', 真, 真

// ユーザー.js
'axios' から axios をインポートします。

クラスユーザー{
  静的オール() {
    axios.get('/users.json').then(resp => resp.data); を返します。
  }
}

デフォルトのユーザーをエクスポートします。

// ユーザー.テスト.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));
});

// モック関数は少なくとも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('モック名');

糸を追加 -D jest @vue/test-utils vue-jest

// jest.config.js

モジュール.エクスポート = {
    モジュール名マッパー: {
        '^@/(.*)$': '<ルートディレクトリ>/src/$1'
    }
}

//テスト

// 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' を返す
        }
    }
})

'@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) を期待します
  })
})

it('ボタンをクリックするとカウントが増加する', () => {
  期待値(wrapper.vm.count).toBe(0)
  const ボタン = wrapper.find('ボタン')
  button.trigger('クリック')
  期待値(wrapper.vm.count).toBe(1)
})

it('ボタンをクリックするとカウントテキストが増加する', async () => {
  期待(wrapper.text()).toContain('0')
  const ボタン = wrapper.find('ボタン')
  ボタンのトリガー('クリック')を待機します。
  期待(wrapper.text()).toContain('1')
})

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('発行されました!')
  })
})

it('状態を操作する', async () => {
  wrapper.setData({ count: 10 }) を待機します。

  wrapper.setProps({ foo: 'bar' }) を待機します。
})

'@/components/MyComponent.vue' から MyComponent をインポートします。

記述('MyComponent', () => {
  it('クリックすると何かが起きる', async () => {
    const mockMethod = jest.spyOn(MyComponent.methods, 'doSomething')
    shallowMount(MyComponent).find('button').trigger('click') を待ちます。
    期待(mockMethod).toHaveBeenCalled()
  })
})

// jest.config.js
モジュール.エクスポート = {
    セットアップファイル: ['<rootDir>/tests/unit/setup.js']
}

// セットアップ.js
'vue' から Vue をインポートします

// 以下のグローバルに登録されたプラグインは Jest では動作しないため、localVue を使用する必要があります
'element-ui' から ElementUI をインポートします。
'vue-clipboard2' から VueClipboard をインポートします。

Vue.use(要素UI)
Vue.use(Vueクリップボード)

Vue.config.productionTip = false

'@vue/test-utils' から { createLocalVue, mount } をインポートします。

// 拡張された `Vue` コンストラクタを作成する const localVue = createLocalVue()

// プラグインを通常どおりインストールします localVue.use(MyPlugin)

// マウントオプションに `localVue` を渡す
マウント(コンポーネント、{
  ローカルビュー
})

時計：
  入力値(新しい値、古い値) {
    (newVal.trim().length && newVal !== oldVal) の場合 {
      コンソールログ(新しい値)
    }
  }
}

記述('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();
    終わり（）;
  });
});

'@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)
})