LoginSignup
4
1

More than 3 years have passed since last update.

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

Posted at

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

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

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

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1