Vue 测试实用程序如何使用 v-model 更改选择值

Question

您好，我想检查更改测试内部 select 的值后会发生什么。我正在使用vue-test-utils. 目前我无法检查选择是否发出了输入事件。如果重要的话，我正在使用 Buefy select 组件。

组件的html部分

<b-select
  v-model="workHoursType"
>
  <option :value="WORKING_HOURS_PERIOD.daily">{{daily}}</option>
  <option :value="WORKING_HOURS_PERIOD.weekly">{{weekly}}</option>
</b-select>

测试由于undefined发出而失败

it("once working hours type is set to daily, the hours per week should have no value", async () => {
    const wrapper = createWrapper();

    const options = wrapper.find("select").findAll("option");
    await options.at(1).setSelected();

    await flushPromises();

    expect(wrapper.emitted().input).toBeDefined();
  });

我还看到了v-model基于组件的不同方法，但它仍然对我不起作用。

it("with v-model", async () => {
    const wrapper = createWrapper();

    const select = wrapper.find("select");
    const option = wrapper.findAll("option").at(0);
    option.element.selected = true;
    select.trigger("change");

    await flushPromises();

    expect(wrapper.emitted().input).toBeDefined();
  });