computed
の確認 → text()
や find()
に書き換える方法(wrapper.vm
依存のテストを書き換える方法)
クラスコンポーネントでは
wrapper.vm.computed名
で computed
の値が取れた。
Composition API に書き換えると
computed
の中身は setup()
の中 →wrapper.vm
には出てこない。👉 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>
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 に直接アクセス
});
});
<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>