Vue.js単体テストで複数のコンポーネントを扱う

3242 ワード
vue-test-utils Vue.js Jest test テスト test テキストリンク

単体テストで、親子揃って初めて機能するコンポーネントをテストする際などに子をマウントする方法です。

以下のような場合、親をマウントして子をコンポーネントとして登録します。

index.vue
<template>
  <tabs>
    <tab>タブ 1</tab>
    <tab>タブ 2</tab>
    <tab>タブ 3</tab>
  </tabs>
</template>
__tests__/index.spec.js
import { mount } from '@vue/test-utils';
import Tabs from '../index.vue';
import Tab from '../../Tab/index.vue';

describe('Tabs', () => {
  const wrapper = mount(Tabs, {
    slots: {
      default: [
        '<tab>タブ 1</tab>',
        '<tab>タブ 2</tab>`',
        '<tab>タブ 3</tab>',
      ]
    },
    components: {
      tab
    }
  });
});

普通に<script>内に書くようにcomponentsで登録すれば良いようです。
componentsはマウンティングオプションに記載がありませんでした。
https://vue-test-utils.vuejs.org/ja/api/options.html

JAva基礎知識点まとめ
Javaコンソールからの文入力の受信