Emitted events doesn't work with defineModel #572
Comments
|
@danielroe also added some tests for it in danielroe/nuxt-vitest#193. I included test with |
danielroe
added
bug
|
I've merged the tests in (as a TODO) in #629. |
|
I will write down what I have found in my research in case it helps anyone. Even with defineModel, it works as expected for <button
id="changeModelValue"
@click="$emit('update:modelValue', true)"
/>If // FIXME: fix this failing test
it('can receive emitted events from components mounted within nuxt suspense using defineModel', async () => {
const component = await mountSuspended(WrapperTests)
component.find('button#changeModelValue').trigger('click')
// outouts: { 'update:modelValue': [ [ true ] ] }
console.log(component.findComponent({ name: 'MountSuspendedComponent' }).emitted())
expect(component.emitted()).toHaveProperty('update:modelValue')
}) |
|
HI, This does not work for me : <script setup lang="ts">
const innerValue = defineModel({ type: String });
</script>
<template>
<input v-model="innerValue" />
</template>
it("emits input event", async () => {
const wrapper = await mountSuspended(VMT, {
props: {
modelValue: "initialText",
"onUpdate:modelValue": (e) =>
wrapper.setProps({ modelValue: e }),
},
});
const input = wrapper.find("input");
await input.setValue("newvalue");
expect(wrapper.emitted("update:modelValue")).toBeTruthy();
});Everything comes straight from the doc, but
The same test but with vue/testutils used directly succeed, even though wrapper is still typed as it("emits input event", async () => {
const wrapper = mount(VMT, {
props: {
modelValue: "initialText",
"onUpdate:modelValue": (e) =>
wrapper.setProps({ modelValue: e }),
},
});
const input = wrapper.find("input");
await input.setValue("newvalue");
expect(wrapper.emitted("update:modelValue")).toBeTruthy();
});What is the recommended way to test this ? Maybe I should just not test that, it's practically like testing vue in this case right ? |
|
I found that when testing with the following code, a warning like this appears in the terminal. it('入力値がtrimされることを確認する', async () => {
const wrapper = await mountSuspended(PartsInputText, {
props: {
'modelValue': '',
'name': 'test-input',
'onUpdate:modelValue': (e: string) => wrapper.setProps({ modelValue: e }),
},
})
await wrapper.find('input').setValue(' テスト ')
expect(wrapper.emitted('update:modelValue')).toBeTruthy()
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['テスト'])
expect(wrapper.props('modelValue')).toBe('テスト')
}) |
|
This error also occurs without <script setup lang="ts">
// const [modelValue] = defineModel<string>();
const props = defineProps<{
modelValue: string;
}>();
const emits = defineEmits<{
'update:modelValue': [value: string];
}>();
const modelValue = computed({
get() {
return props.modelValue;
},
set(value) {
emits('update:modelValue', value);
},
});
</script>import { mountSuspended } from '@nuxt/test-utils/runtime';
import { mount } from '@vue/test-utils';
import { describe, expect, it } from 'vitest';
import MyComp from './MyComp.vue';
describe('MyComp', () => {
it('should have v-model events working with mountSuspended', async () => {
const comp = await mountSuspended(MyComp, {
props: {
modelValue: 'hello',
'onUpdate:modelValue': (e: any) => comp.setProps({ modelValue: e }),
},
});
await comp.get('input').setValue('test');
// this one fails
expect(comp.props('modelValue')).toBe('test');
});
it('should have v-model events working with mount', async () => {
const comp = await mount(MyComp, {
props: {
modelValue: 'hello',
'onUpdate:modelValue': (e: any) => comp.setProps({ modelValue: e }),
},
});
await comp.get('input').setValue('test');
expect(comp.props('modelValue')).toBe('test');
});
}); |
In
v0.8.1emitted events were fixed in mountSuspended, but they still doesn't work withdefineModel.Added some tests for it in danielroe/nuxt-vitest#193.
The text was updated successfully, but these errors were encountered: