質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

0回答

2227閲覧

[vue]jestでのslotsにコンポーネントを入れる場合のテスト

TaikiNamioka

総合スコア24

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2019/02/27 08:06

編集2022/01/12 10:55

jestでのテストコードを書いているのですが、

slotsにTab.jsのコンポーネントを入れて、それがTabs.jsに反映しているかをテストしています。
ですがslotsに入れたTab.jsのDOMが正常にレンダリングされておらずDOMを取得することができませんでした。
Tab.jsのpropsはrequiredがtrueなので値を渡したいです。

内包されるSlotsのコンポーネントを取得する際はどのようなアプローチを取ればよろしいでしょうか?

js

1//親のコンポーネント 2 <div> 3 <StTabs v-model="value"> 4 <StTab name="TEST" label="TEST1">こんにちわ1</StTab> 5 <StTab name="TEST2" label="TEST2" >こんにちわ2</StTab> 6 <StTab name="TEST3" label="TEST3">こんにちわ3</StTab> 7 <StTab name="TEST4" label="TEST4">こんにちわ4</StTab> 8 <StTab name="TEST5" label="TEST5">こんにちわ5</StTab> 9 <StTab name="TEST6" label="TEST6">こんにちわ6</StTab> 10 </StTabs> 11 </div>

js

1//テストコード 2import { mount } from '@vue/test-utils'; 3import Tabs from '~/src/components/Navigations/Tabs.vue'; 4import Tab from '~/src/components/Navigations/Tab.vue'; 5 6 test('tabsのコンポーネントが必要個数作られること', () => { 7 const wrapper = mount(Tabs, { 8 propsData: { value: 'test' }, 9 slots: { 10 default: [ 11 `<tab name="test" label="TEST">test</tab>`, 12 `<tab name="test2" label="TEST2">test2</tab>`, 13 `<tab name="test3" label="TEST3">test3</tab>` 14 ] 15 }, 16 stubs: { 17 'tab': Tab 18 }, 19 attachToDocument: true 20 }); 21 console.log(wrapper.html());//結果:<div class="tabs"><div class="tabs_wrap"><ul class="tab__bar"></ul></div> <div class="panels"><!----><!----><!----></div></div> 22 expect(wrapper.find('.tab__bar').element.children).toBe(3); 23 });

vue

1//Tabs.js 2<template> 3 <div class="tabs"> 4 <div class="tabs_wrap"> 5 <ul class="tab__bar"> 6 <li 7 v-for="tab in tabs" 8 :key="tab.name" 9 class="tab" 10 :class="{ 11 active: tab.name === value && !disabled, 12 disabled: tab.disabled || disabled 13 }" 14 @click="selectTab(tab.name)" 15 > 16 {{ tab.label }} 17 </li> 18 </ul> 19 </div> 20 <div class="panels"><slot /></div> 21 </div> 22</template> 23 24<script> 25export default { 26 name: 'Tabs', 27 props: { 28 value: { 29 type: String, 30 required: true 31 }, 32 disabled: { 33 type: Boolean, 34 default: false 35 } 36 }, 37 data() { 38 return { 39 tabs: [] 40 }; 41 }, 42 created() { 43 this.tabs = this.$children; 44 }, 45 mounted() { 46 this.selectTab(this.value); 47 }, 48 methods: { 49 selectTab(tabName) { 50 this.tabs.forEach(tab => { 51 tab.isActive = tab.name === tabName; 52 if (tab.disabled || this.disabled) tab.isActive = false; 53 this.$emit('input', tabName); 54 }); 55 } 56 } 57}; 58</script>

vue

1//Tab.js 2<template> 3 <div v-if="isActive" class="panel"><slot /></div> 4</template> 5 6<script> 7export default { 8 name: 'StTab', 9 props: { 10 name: { 11 type: String, 12 required: true 13 }, 14 label: { 15 type: String, 16 required: true 17 }, 18 active: { 19 type: Boolean, 20 required: false, 21 default: false 22 }, 23 disabled: { 24 type: Boolean, 25 required: false, 26 default: false 27 } 28 }, 29 data() { 30 return { 31 isActive: this.active 32 }; 33 } 34}; 35</script> 36

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問