■ はじめに

https://dk521123.hatenablog.com/entry/2021/01/07/230317

の続き。
今回は、Vueの単体試験をやる上での
基本的なメソッドやTipsを纏める。

【１】主なメソッド

１）取得

#	Method names	Explanations	Notes
1	wrapper.find()	要素を取得	wrapper.find('#sample1')
2	wrapper.findAll()	要素を全取得	wrapper.find('.css-class')
3	wrapper.text()	表示テキスト	sample1.text()

使用例

<v-select
  class="select-language"
  data-testid="select-lang"
... 略 ..
></v-select>
を取得する場合...

find()

const vSelect1 = wrapper.find(`[data-testid="select-lang"]`);
console.log(vSelect1.name()); // 'v-select' が出力

const vSelect2 = wrapper.find('.select-language');
console.log(vSelect2.name()); // 'v-select' が出力

findAll()

const vSelects = wrapper.findAll('.select-language');
const vSelect3 = vSelects.at(0);
console.log(vSelect3.name()); // 'v-select' が出力

２）確認

#	Method names	Explanations	Notes
1	wrapper.exists()	存在チェック	sample1.exists()
2	wrapper.isVisible()	表示/非表示チェック	sample1.isVisible()

【２】サンプル

例１：存在・表示/非表示・Text表示チェック

Hello.vue

<template>
  <div class="hello">
    <div id="sample1" v-if="isShown">
      {{text}}
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class Hello extends Vue {
  // props
  @Prop({ default: true })
  public isShown!: boolean;

  @Prop({ default: 'Hello' })
  public text!: string;
}
</script>

Hello.spec.ts

import { shallowMount } from "@vue/test-utils";
import Hello from '@/views/Hello.vue';

describe("Hello", () => {
  it("isShown - true", () => {
    const isShown = true;
    const wrapper = shallowMount(Hello, {
      propsData: { isShown }
    });
  
    const sample1 = wrapper.find('#sample1');
    // 存在している
    expect(sample1.exists()).toBeTruthy();
    // 表示されている
    expect(sample1.isVisible()).toBeTruthy();
  });

  it("isShown - false", () => {
    const isShown = false;
    const wrapper = shallowMount(Hello, {
      propsData: { isShown }
    });

    const sample1 = wrapper.find('#sample1');
    // 存在していない
    expect(sample1.exists()).toBeFalsy();
  });

  it("text - abcd", () => {
    const text = 'abcd';
    const wrapper = shallowMount(Hello, {
      propsData: { text }
    });
  
    const sample1 = wrapper.find('#sample1');
    // Text表示チェック
    expect(sample1.text()).toBe('abcd');
  });
});

【３】その他の確認

１）disabled の確認

サンプル

const button = wrapper.find('#sample1');

// disabled = true の場合
expect(button.attributes().disabled).toBeTruthy();

// disable じゃない場合の確認
// expect(button.attributes().disabled).toBeFalsy();

参考文献
https://kojirooooocks.hatenablog.com/entry/2018/12/11/023037
https://github.com/enzymejs/enzyme/issues/336

参考文献

https://qiita.com/macotok/items/7756858b23a3816d3415
https://qiita.com/kskinaba/items/d23259060e6e13b7353c

Jestを使った Vue / TypeScript の単体試験～入門編～
https://dk521123.hatenablog.com/entry/2021/01/07/230317
Jestを使った Vue / TypeScript の単体試験～非同期編～
https://dk521123.hatenablog.com/entry/2021/03/13/000000
Jestを使った Vue / TypeScript の単体試験～ axios 編～
https://dk521123.hatenablog.com/entry/2021/01/16/202822
JS単体試験ツール Jest ～入門編～
https://dk521123.hatenablog.com/entry/2020/12/23/103209
JS単体試験ツール Jest ～基本編～
https://dk521123.hatenablog.com/entry/2021/01/08/164356
JS単体試験ツール Jest ～ Mock編～
https://dk521123.hatenablog.com/entry/2021/01/26/215558
JS単体試験ツール Jest ～キャッシュ関連～
https://dk521123.hatenablog.com/entry/2021/03/12/164932
Vue + NightWatch で E2Eテストをする
https://dk521123.hatenablog.com/entry/2021/02/06/220603

プログラムの超個人的なメモ

Memo for Programming.

【Vue】Jestを使った Vue / TypeScript の単体試験～基本編～