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

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

Deprecatedになるもの

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

Mounting Options

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

この2つのメソッドはそれぞれセレクタとかで指定した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.findComponentWrapper.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-domtoBeEmpty()を利用する

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

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

Wrapper.isVisible

jest-domtoBeVisible()を利用する

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

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

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください