触发b-form-checkbox点击时未触发change事件的原因排查

问题背景 #

使用Jest测试ToggleExample组件时，尝试验证点击<b-form-checkbox>切换按钮是否触发change事件，但测试失败，错误信息如下：

expect(received).toBeDefined()

Received: undefined

|
| await $input.trigger('click');
| expect(wrapper.emitted('change')).toBeDefined();

组件代码（ToggleExample.vue） #

<template>
  <div class="filter-container">
    <b-form-checkbox switch size="lg" v-model="onlyActive" @change="onlyActiveChange()">
      Only active
    </b-form-checkbox>
  </div>
</template>

<script>
export default {
  name: 'CheckboxExample',
  data() {
    return {
      onlyActive: false,
    };
  },
  methods: {
    onlyActiveChange() {
      console.log('Only active checkbox changed!');
      this.$emit('onlyActiveChange', this.onlyActive);
    },
  },
};
</script>

测试代码（ToggleExample.spec.js） #

import { mount, createLocalVue } from '@vue/test-utils';
import { BootstrapVue } from 'bootstrap-vue';
import ToggleExample from 'ToggleExample.vue';

const localVue = createLocalVue();
localVue.use(BootstrapVue);

describe('ToggleExample.vue Render Test', () => {
  let wrapper = null;

  beforeEach(() => {
    wrapper = mount(ToggleExample, { localVue });
  });

  afterEach(() => {
    jest.resetModules();
    wrapper.destroy();
  });

  it('toggle click emits change', async () => {
    expect(wrapper.vm).toBeDefined();
    expect(wrapper.emitted('change')).toBeUndefined();

    const $input = wrapper.find('.filter-container').find('input');
    expect($input).toBeDefined();

    await $input.trigger('click');
    // await wrapper.vm.$nextTick();
    expect(wrapper.emitted('change')).toBeDefined();
  });
});

问题原因 #

1. 事件混淆：你的ToggleExample组件并没有对外抛出change事件——组件内部只是监听了<b-form-checkbox>的change事件，然后调用onlyActiveChange方法，最终对外抛出的是onlyActiveChange事件。测试中断言wrapper.emitted('change')必然失败，因为这个事件从未被组件emit。
2. 元素选择不当：直接操作原生input元素，可能无法触发BootstrapVue组件封装的完整事件逻辑，导致事件未正确传递。

解决方案 #

方案1：验证组件对外抛出的onlyActiveChange事件（推荐） #

这是更符合组件测试逻辑的方式，聚焦组件的对外行为：

it('toggle click emits onlyActiveChange', async () => {
  // 初始状态下事件未触发
  expect(wrapper.emitted('onlyActiveChange')).toBeUndefined();

  // 找到b-form-checkbox组件实例
  const checkbox = wrapper.findComponent({ name: 'BFormCheckbox' });
  // 触发组件的change事件
  await checkbox.trigger('change');

  // 断言事件已触发
  expect(wrapper.emitted('onlyActiveChange')).toBeDefined();
  // 可选：验证事件携带的参数是否正确（切换后onlyActive变为true）
  expect(wrapper.emitted('onlyActiveChange')[0][0]).toBe(true);
});

方案2：验证内部方法onlyActiveChange被调用 #

如果需要验证组件内部方法的执行情况，可以用Jest的mock监听：

it('triggers onlyActiveChange method on toggle', async () => {
  // 给组件的onlyActiveChange方法打mock
  const mockMethod = jest.spyOn(wrapper.vm, 'onlyActiveChange');
  
  // 找到并触发b-form-checkbox的change事件
  const checkbox = wrapper.findComponent({ name: 'BFormCheckbox' });
  await checkbox.trigger('change');

  // 断言方法已被调用
  expect(mockMethod).toHaveBeenCalled();
  
  // 清理mock，避免影响其他测试
  mockMethod.mockRestore();
});

方案3：操作原生input元素（备选） #

如果一定要操作原生input，需要先修改其选中状态，再触发change事件：

it('triggers event via native input', async () => {
  expect(wrapper.emitted('onlyActiveChange')).toBeUndefined();

  const $input = wrapper.find('input');
  // 修改input的选中状态
  await $input.setChecked(true);
  // 触发change事件
  await $input.trigger('change');

  expect(wrapper.emitted('onlyActiveChange')).toBeDefined();
});

内容的提问来源于stack exchange，提问作者Oscar Schafer