Open5

Vitest + Vue-test-utils ユニットテスト

まるまる
  • 単体テスト　＝　大きなアプリケーションの場合、結合テストでバグが発生した時にどの要素で起こっているか見分けがつきにくい。そのため、構成要素１つ１つをテストしてその要素（関数など）にバグがないことを保証しておくと安心。

__tests__フォルダの構成

  • １つのテストファイルに、１つのテスト対象ファイル
  • １つのテストスイート(describe) に、１つのテスト対象部品(関数やメソッド)

関数のテスト

  • 入力値に対して期待した出力値である

コンポーネントのテスト

  • (入出力に)ユーザーの視点や操作が必要。コンポーネントは画面表示そのもの(または表示に一部)だから。
  • const wrapper = mount(App)
    • mount：擬似的なマウント状態を作る
    • wrapper：wrapperには、mountの戻り値であるマウントされたコンポーネントのインスタンスが入る。Vue Wrapper型となる。

初期表示のテスト

  • 入力：「なし」、出力：「<p>に"xxxxx"という文字が表示」など
  • const actual = wrapper.get('p'<セレクタ名>).text()

入力操作のテスト

  • .setValueを使う
  • 例：await wrapper.get('[data-testid="num1"]').setvalue(8);

v-if など隠し要素のテスト

  • .exists()を使う
  • 例：const actual = wrapper.find('[data-testid="num1"]').exists()
    **.getではなく.find＝getは要素がないとエラーになる。findがならない。

イベント操作のテスト

  • .triggerを使う
  • 例：クリック操作の時
    await wrapper.get('[data-testid="num1"]').trigger("click");
まるまる

シュチュエーション別テスト

初期表示のテスト

  • 入力：「なし」、出力：「<p>に"xxxxx"という文字が表示」など
  • const actual = wrapper.get('p'<セレクタ名>).text()

入力操作のテスト

  • .setValueを使う
  • 例：await wrapper.get('[data-testid="num1"]').setvalue(8);

v-if など隠し要素のテスト

  • .exists()を使う
  • 例：const actual = wrapper.find('[data-testid="num1"]').exists()
    **.getではなく.find＝getは要素がないとエラーになる。findがならない。

イベント操作のテスト

  • .triggerを使う
  • 例：クリック操作の時
    await wrapper.get('[data-testid="num1"]').trigger("click");
まるまる

コンポーネント間のデータ受け渡しのある対象のテスト

  • プロップスでもらったデータを使って初期表示するコンポーネント

    • 初期表示のテスト
      • propsの値はテスト内で仮データを用意する
      • 仮データをmountの第２引数に渡す
      • 例：const wrapper = mount(ChildComp, {props:propsData<仮データを格納した変数>})
      • マッチャー例：const actualText = wrapper.text()
        expect(actualText).toContain(propsData.name)

  • Emitがあるテスト

    • wrapper.emitted("emit名")
    • ↑戻り値は配列になっていて、呼ばれた回数分要素が増える 1回：[[…]] 2回：[[…],[…]]になる。
    • […]には、親に渡す値=emit()の第２引数が入っている。
    • テストでは、呼ばれた回数、引数の値をテストする。
まるまる

親コンポーネントのテスト

  • 親コンポのテストが難しい点：
    　レンダリング時に子コンポーネントも読み込まれるため。子と切り分けるのがむずかしい。
    　　↓
    　解決策：子コンポをスタブする。
    　***テスト対象は、親コンポ独自の部分のみ。

  • スタブ
    　const options = {
    　　global : {
    　　　stubs : {
    　　　　ChildComp : true
    　　　　}}}
    　const wrapper = mount(App, oprions)

  • 子コンポからのEmitがある親コンポのテスト
    　例：
    　const childCompContent = wrapper.findComponent(ChildComp)
    　await childCompContent.vm.$emit("emit名",引数)

    • findComponent()：コンポーネントを取得する
    • $emit：本物のemit()と同じ。第１引数にEmitイベント名、第２引数に親コンポに渡すデータ。
まるまる
  • flushPromises()使うとき・使わないとき
  • flushPromises＝非同期の操作や通信などで使用。ペンディング中のPromiseの処理を即時で終わらせる。

使わない：
クリックしたことを確認するだけなそ、即時で処理される
使う：
クリックし後にページの更新が行われて、そのページをテストしたい時