I've been puzzling over why I can't seem to successfully test a V-model and what mistake I might be making. Here's my straightforward component:
<template>
<p>Hello counter!! {{ modelValue }}</p>
<button type="button" @click="buttonClicked">Click me</button>
</template>
<script lang="ts">
export default {
props: {
modelValue: {
type: Number,
default: 0,
},
},
emits: ["update:modelValue"],
methods: {
buttonClicked() {
console.log("button clicked!!!");
this.value = this.value + 1;
},
},
computed: {
value: {
get() {
return this.modelValue;
},
async set(value: any) {
console.log("Passing!!!");
this.$emit("update:modelValue", value);
},
},
},
};
</script>
And here's the test scenario I have in place:
import { nextTick } from "vue";
import { describe, it, expect } from "vitest";
import CounterView from "../CounterView.vue";
describe("CounterView", () => {
it("should update v-model correctly", async () => {
let modelValue = 12;
const wrapper = shallowMount(CounterView, {
props: {
modelValue,
},
});
const button = wrapper.find<HTMLElement>("button");
await button.element.click();
await nextTick();
expect(modelValue).toBe(13);
expect(wrapper.vm.$props.modelValue).toBe(13);
});
});
Unfortunately, neither of these assertions are yielding the desired outcome:
expect(modelValue).toBe(13);expect(wrapper.vm.$props.modelValue).toBe(13);
FAIL components/__tests__/CounterView.spec.ts > CounterView > should update v-model properly
AssertionError: expected 12 to be 13 // Object.is equality
❯ components/__tests__/CounterView.spec.ts:22:42
20|
21| // expect(modelValue).toBe(13);
22| expect(wrapper.vm.$props.modelValue).toBe(13);
| ^
23| });
24| }
- Expected "13"
+ Received "12"
What am I missing or doing incorrectly?