[Vue] vue-test-utils の Deprecation warning への対応

ドキュメントの言語選択で日本語にしてるとまだ説明が出ないが、
警告は5月にリリースされててアップデートしたら洗礼を受ける。
よく使ってたのが対象になってるのでテストが多いと対応がしんどい😫

Deprecatedになるもの

DOMに関する部分の取り扱いをやめるので、それに関連していたところが削除対象になった感じ。

Mounting Options

attachToDocument（→attachTo）

Wrapper

Wrapper.emittedByOrder（→Wrapper.emitted）
Wrapper.find（→Wrapper.findComponent）
コンポーネントが対象の場合はWrapper.findComponentを利用する
Wrapper.findAll（→Wrapper.findAllComponents）
コンポーネントが対象の場合はWrapper.findAllComponentsを利用する
Wrapper.is
DOMノードまたはvmの一致セレクタが削除される。
Wrapper.isEmpty
Wrapper.isVisible
Wrapper.isVueInstance
このアサーションに依存するテストはほとんど価値がないけど、
維持するならwrapper.find(...).vm を利用する
Wrapper.name
Wrapper.setMethods
これを置き換える明確な方法はない。
メソッドを抽出してテストしたり、スパイを利用するなど、テストそのものを再考した方がいい。

WrapperArray

jest-domの設定方法

DOMを扱うテストを行う場合はカスタムマッチャーが必要になった。
以下はドキュメントでお勧めされてる jest-dom の設定方法。

// /test/jest.setup.js
import '@testing-library/jest-dom';

セットアップファイルを作成してjest-domをimportする。

// jest.config.js
module.exports = {
  setupFilesAfterEnv: ['<rootDir>/test/jest.setup.js']
}

jest.config.jsのsetupFilesAfterEnvに作成したセットアップファイルを設定する。

attachToDocument

attatchToでDOMを渡すかセレクタで要素を指定する。
このオプションを利用した場合、wrapper.destroy() の実行が必須になる。

describe('テスト', () => {
  const elem = document.createElement('div')
  if (document.body) {
    document.body.appendChild(elem)
  }

  afterEach(() => {
     wrapper.destroy();
  });

  it('何かのテスト', () => {
    wrapper = mount(Component, {
      attachTo: elem
    })
  });
});

Wrapper.findとWrapper.findAll

この２つのメソッドはそれぞれセレクタとかで指定したDOM要素やコンポーネントを取得できるものだが、コンポーネントを指定する場合は.findComponentと.findAllComponentsを利用する。

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = mount(Foo)

// DIV要素
const div = wrapper.find('div')
expect(div.exists()).toBe(true)

// id="bar"の要素
const byId = wrapper.find('#bar')
expect(byId.element.id).toBe('bar')

// コンポーネントref指定 （deprecated）
const bar = wrapper.find({ ref: 'bar' })
expect(bar.is(Bar)).toBe(true)

// コンポーネントref指定 （修正後）
const bar = wrapper.findComponent({ ref: 'bar' })
expect(bar.is(Bar)).toBe(true)

// すべてのDIV要素
const div = wrapper.findAll('div').at(0)
expect(div.is('div')).toBe(true)

// コンポーネント指定 （deprecated）
const bar = wrapper.findAll(Bar).at(0)
expect(bar.is(Bar)).toBe(true)

// コンポーネント指定 （修正後）
const bar = wrapper.findAllComponents(Bar).at(0)
expect(bar.is(Bar)).toBe(true)

Wrapper.findComponentやWrapper.findAllComponentsで指定したコンポーネントが関数型だった場合はエラーになるバグがあるので対応されるまで変更しないでおく。

Wrapper.is

これはセレクタの種類によって置き換えるメソッドが変わる。

タグ名

タグ名一致の場合、wrapper.element.tagName を利用する。

expect(wrapper.is('button')).toBe(true);

// 変更後
expect(wrapper.element.tagName).toBe('BUTTON');

jest-domを設定してない場合は変更後のテストがエラーになる。

属性名

.attributes()を利用する

expect(wrapper.is('checked')).toBe(true);

// 変更後
expect(wrapper.attributes('checked')).toBe(true);

クラス名

.classes()を利用する

expect(wrapper.is('active')).toBe(true)

// 変更後
expect(wrapper.classes('active')).toBe(true)

Wrapper.isEmpty

jest-domのtoBeEmpty()を利用する

expect(wrapper.isEmpty()).toBe(true)

// 変更後
expect(wrapper.element).toBeEmpty()

Wrapper.isVisible

jest-domのtoBeVisible()を利用する

expect(wrapper.isVisible()).toBe(true)

// 変更後
expect(wrapper.element).toBeVisible()