【逆引き】Vue Test UtilsのJestでテスト記法のまとめ

【逆引き】Vue Test UtilsのJestでテスト記法のまとめ

Jestでテストする時に○○がしたい、でも記述法が分からず調べる… その繰り返しです。
まとまった情報があると便利なので、まとめていきたいと思います。

逆引きテスト記法

テスト対象のコンポーネントを見つける

findメソッドセレクタを使用することでDOMを特定できます。

// css selector
const item = wrapper.find('.className');
// id selector
const item = wrapper.find('#id');
// name selector
const item = wrapper.find('[name="age"]');

html HTMLをそのまま出力する

htmlメソッドで、wrapperのDOMのHTMLをそのまま出力します。

wrapper.html();

テキスト要素を取得する

spanタグ等で囲われた文字列を取得するにはtextを使用します。

expect(wrapper.text()).toBe('タイトル')

style要素の値をチェックする

DOMのstyle要素に指定された値を判定するにはattributesで属性を参照した上で、styleを指定します。
値は複数のスタイル指定が文字列でまとめて返ってくるので、完全一致ではなく部分一致(toContain)で見ると良いでしょう。

expect(wrapper.attributes().style).toContain('height: 10px');

表示・非表示を判定する

isVisibleでv-showによって非表示, display:noneであるかを判定できます。

expect(wrapper.isVisible()).toBeFalsy();

メソッドがコールされたかチェックする

チェックできるのはjest.fn()で生成したモックのメソッドのみで、toHaveBeenCalledで1回以上コールされたか判定できます。

const mockFunction = jest.fn();
const wrapper = mount([Component], {
  localVue,
  propsData: {
    handleClick: mockFunction,
  }
});
wrapper.trigger('click');
expect(mockFunction).toHaveBeenCalled();

dataの値をチェックする

mountしたコンポーネントからdataの値を参照できます。

const wrapper = mount([Component], {
  localVue
});
expect(wrapper.vm.$data.name).toBe('anpanman');

methodsを実行する

mountしたコンポーネントのmethodを実行します。

const wrapper = mount([Component], {
  localVue
});
wrapper.vm.clickButton();

mockのmethodの返り値をセットする

mockにしたmethodの返り値を設定できます。
同期メソッドと非同期メソッド(Promise)では設定方法が異なり、それぞれ以下のように設定します。

同期メソッド

const mockMethod = jest.fn();
mockMethod.mockReturnValue(1);

非同期メソッド

const mockMethod = jest.fn();
mockMethod.mockResolvedValue({ data: { id: 1 } });

参考

記載のないものは公式のリファレンスAPIを参考にすると良いでしょう。

Jest – Expect
https://jestjs.io/docs/ja/expect

Wrapper | Vue Test Utils
https://vue-test-utils.vuejs.org/ja/api/wrapper/

プログラミングカテゴリの最新記事