我目前正在为实现 Vuetify Switch 的 Vue 组件编写测试。作为测试的一部分,我想检查 vuetify 开关的功能。我在触发点击开关时遇到麻烦,然后验证开关值是否已更改(一旦完成,我将验证绑定(bind)到开关的值也已更改)
我查看了 Vuetify 的 API 文档,并且没有直接设置 Vuetify 开关状态的方法,这在我看来是令人困惑的。因此,我尝试使用 wrapper.find().trigger('click')
对 VSwitch 组件进行单击。但这并没有改变开关值,让我相信点击根本没有做任何事情。
下面是两个测试
解决此问题的任何帮助将不胜感激。
切换.vue
<template>
<v-row>
<v-col>
<label class="label-text" :for="`${fieldLabel}`">{{labelText}}</label>
<v-row>
<label class="left-label">{{toggleLeftText}}</label>
<v-switch
:id="`${fieldLabel}`"
v-model="toggleState"
class="ma-0 pa-0"
:data-qa="`${fieldLabel}Checkbox`"
>
</v-switch>
<label class="right-label">{{toggleRightText}}</label>
</v-row>
<!--Hidden input field includes switch value in form when submitted-->
<input type="hidden" :value="toggleState" :name="`${fieldLabel}`">
</v-col>
</v-row>
</template>
<script>
export default {
name: "Switch",
props: {
fieldLabel: {
type: String,
required: true
},
labelText: {
type: String,
required: true
},
toggleLeftText: {
type: String,
required: true
},
toggleRightText: {
type: String,
required: true
},
toggleValue: {
type: Boolean,
required: true
},
},
data: function () {
return {
toggleState: this.toggleValue
}
}
}
</script>
switch.spec.js
describe('Switch', () => {
const toggleState = true;
const localVue = createLocalVue();
localVue.use(Vuetify, {
components: {
VRow,
VCol,
VSwitch,
InputError
}
});
const wrapperFactory = () => {
return shallowMount(Switch, {
localVue,
vuetify: new Vuetify(),
propsData: testProps,
});
};
const testProps = {
labelText: "Test Label",
fieldLabel: "testLabel",
toggleLeftText: "No",
toggleRightText: "Yes",
toggleValue: toggleState
};
let wrapper;
beforeEach(() => {
wrapper = wrapperFactory(testProps);
});
afterEach(() => {
wrapper.destroy();
});
it("should have correct toggle value", () => {
const vSwitch = wrapper.find(VSwitch);
expect(vSwitch.vm.value).toBe(toggleState);
});
it("should have correct toggle value after click", async () => {
const vSwitch = wrapper.find(VSwitch);
await vSwitch.trigger('click');
expect(vSwitch.vm.value).toBe(!toggleState);
});
});
最佳答案
我回答你的问题可能有点晚了,但是这样你应该可以得到你的 v-switch
.const vSwitch = wrapper.find({ name: 'v-switch' });
然后触发事件vSwitch.$emit('change', <true or false>);
,取决于您要测试的内容。
这种方法的限制是,如果您有多个 v-switch
es 在您的代码中,您需要使用 data-test-id
来定位它们,例如像这样:
<v-switch data-test-id="my-switch-1"> ... </v-switch>;
<v-switch data-test-id="my-switch-2"> ... </v-switch>;
然后我在我的测试文件之上定义了一个辅助函数,如下所示:const getSwitchComponent = (wrapper: Wrapper<Vue>, testId: string): Wrapper<Vue> => {
const switches = wrapper.findAll({ name: 'v-switch' });
const component = switches.wrappers.find(wrapper =>
wrapper.contains(`[data-test-id="${testId}"]`),
);
if (!component) {
throw Error(`Element not found: ${testId}`);
}
return component;
};
这将让你做这样的事情:const mySwitch1 = getSwitchComponent(wrapper, 'my-switch-1');
const mySwitch2 = getSwitchComponent(wrapper, 'my-switch-2');
并触发change
事件如此:mySwitch1.vm.$emit('change', false);
mySwitch2.vm.$emit('change', true);
关于javascript - 使用 Jest 进行测试时无法执行单击 Vuetify vSwitch,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59070143/