🎯 3.1 computed の確認 → text()find() に書き換える方法

wrapper.vm 依存のテストを書き換える方法)


✅ 【要点】

クラスコンポーネントでは

wrapper.vm.computed名computed の値が取れた。

Composition API に書き換えると

👉 text()find() を使って DOM の出力を確認する 形に書き換える必要がある。


🟢 【クラスコンポーネント時のコード】

🎯 コンポーネント(クラス)

<template>
  <p>{{ double }}</p>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class Counter extends Vue {
  count: number = 2;

  get double(): number {
    return this.count * 2;
  }
}
</script>

🧪 テスト(Before)

import { shallowMount } from '@vue/test-utils';
import Counter from '@/components/Counter.vue';

describe('Counter.vue (クラスコンポーネント)', () => {
  it('double computed は count の2倍', () => {
    const wrapper = shallowMount(Counter);
    wrapper.vm.count = 3; // ← 直接 count を操作
    expect(wrapper.vm.double).toBe(6); // ← computed に直接アクセス
  });
});


🟠 【Composition API への書き換え】

🎯 コンポーネント(Composition API)

<template>
  <p>{{ double }}</p>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

const count = ref(2);
const double = computed(() => count.value * 2);
</script>