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

Question

我目前正在为实现 Vuetify Switch 的 Vue 组件编写测试。作为测试的一部分，我想检查 vuetify 开关的功能。我遇到麻烦，触发单击开关，然后验证开关值是否已更改(一旦完成，我将验证绑定到开关的值是否也已更改(

我查看了 Vuetify 的 API 文档，没有方法可以直接设置 Vuetify 开关的状态，在我看来这很令人困惑。因此，我尝试使用wrapper.find().trigger('click')对 VSwitch 组件执行单击，但这并没有更改开关值，导致我相信单击根本没有做任何事情。

以下是两个测试

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

任何解决此问题的帮助将不胜感激。

switch.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>

开关规格.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);
});
});

Answer 1

我回答你的问题可能有点晚了，但这样你应该能够得到你的v-switch。

const vSwitch = wrapper.find({ name: 'v-switch' });

然后触发事件

vSwitch.$emit('change', <true or false>);，具体取决于您要测试的内容。

这种方法的限制是，如果你的代码中有多个v-switch，你需要用一个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);