Javascript 使用Jest测试时无法执行单击Vuetify vSwitch

我目前正在为实现Vuetify开关的Vue组件编写测试。作为测试的一部分，我想检查vuetify开关的功能。我在触发开关上的点击以验证开关值是否已更改时遇到了问题（一旦更改，我将验证绑定到开关的值是否也已更改）

我已经看过Vuetify的API文档，没有直接设置Vuetify开关状态的方法，这在我看来是令人困惑的。因此，我尝试使用

wrapper.find（）.trigger（'click'）

在VSwitch组件上执行单击，但这并没有改变开关值，这让我相信单击根本没有任何作用

下面是两个测试

• 第一个检查开关在创建时是否具有正确的状态，该创建正在通过
• 第二个尝试执行单击事件并检查状态是否已更改，这是失败的

如果您能帮助解决这个问题，我们将不胜感激

开关.vue

{{labelText}}
{{ToggleftText}
{{toggleRightText}}
导出默认值{
名称：“交换机”，
道具：{
字段标签：{
类型：字符串，
必填项：true
},
标签文本：{
类型：字符串，
必填项：true
},
切换左文本：{
类型：字符串，
必填项：true
},
toggleRightText：{
类型：字符串，
必填项：true
},
切换值：{
类型：布尔型，
必填项：true
},
},
数据：函数（）{
返回{
toggleState:this.toggleValue
}
}
}

开关规范js

描述（'开关'，（）=>{
const-toggleState=true；
const localVue=createLocalVue（）；
localVue.use（Vuetify{
组成部分：{
弗洛，
VCol，
VSwitch，
输入器
}
});
常量包装器工厂=（）=>{
返回浅装（开关{
localVue，
vuetify:新的vuetify（），
propsData:testProps，
});
};
常量testProps={
labelText:“测试标签”，
fieldLabel:“testLabel”，
ToggleftText:“否”，
toggleRightText：“是”，
toggleValue:toggleState
};
让包装纸；
在每个之前（（）=>{
包装器=包装器工厂（testProps）；
});
之后（（）=>{
wrapper.destroy（）；
});
它（“应该有正确的切换值”，（）=>{
const vSwitch=wrapper.find（vSwitch）；
expect（vSwitch.vm.value）.toBe（toggleState）；
});
它（“单击后应具有正确的切换值”，异步（）=>{
const vSwitch=wrapper.find（vSwitch）；
等待vSwitch.trigger（'click'）；
expect（vSwitch.vm.value）.toBe（！toggleState）；
});
});

我回答你的问题可能有点晚了，但这样你就可以得到你的

v开关了

const-vSwitch=wrapper.find（{name:'v-switch'}）

然后用

vSwitch.$emit（'change'，），具体取决于您正在测试的内容

这种方法的限制是，如果代码中有多个
v开关
e，则需要使用
数据测试id
，例如：

<v-switch data-test-id="my-switch-1"> ... </v-switch>;
<v-switch data-test-id="my-switch-2"> ... </v-switch>;

const mySwitch1 = getSwitchComponent(wrapper, 'my-switch-1');
const mySwitch2 = getSwitchComponent(wrapper, 'my-switch-2');

并触发
更改
事件，以便：

mySwitch1.vm.$emit('change', false);
mySwitch2.vm.$emit('change', true);

mySwitch1.vm.$emit('change', false);
mySwitch2.vm.$emit('change', true);