Vue登录组件测试失败：如何正确触发submit事件？

测试失败核心原因 #

你的测试期望组件触发submit事件，但实际未触发，问题出在以下几点：

1. $emit调用错误 #

Vue的$emit第一个参数必须是事件名称，而非提示文本。你当前的写法把成功提示语当成了事件名，导致组件从未触发测试预期的submit事件：

// 错误写法
this.$emit("You have successfully loged in", this.username && this.password)

2. 事件参数传递逻辑错误 #

this.username && this.password的写法逻辑存在问题：若用户名为真值但密码为假值，会返回密码；反之返回用户名，无法正确传递完整的用户凭证。

3. 测试前置条件缺失 #

测试时未确保username、password不为空，且enableSubmit状态为true，按钮处于禁用状态时点击不会触发submit方法。

具体修复步骤 #

第一步：修正submit方法 #

将$emit的事件名改为submit，并正确传递用户参数：

submit() {
  // 用trim()过滤空格，避免空字符误判
  if (this.username.trim() !== "" && this.password.trim() !== "") {
    // 触发submit事件，传递完整用户信息
    this.$emit("submit", { 
      username: this.username, 
      password: this.password 
    });
  } else {
    console.log("请输入完整的用户名和密码");
  }
}

第二步：完善测试代码 #

在Jest测试中提前设置组件状态，确保按钮可点击并触发事件：

import { mount } from '@vue/test-utils';
import LoginForm from './LoginForm.vue';

test('LoginForm should emit submit event', () => {
  const wrapper = mount(LoginForm);
  
  // 1. 给组件的用户名和密码赋值
  wrapper.vm.username = 'test_user';
  wrapper.vm.password = 'test_pass';
  
  // 2. 确保enableSubmit为true（如果是计算属性则无需手动设置，确保逻辑正确即可）
  // wrapper.vm.enableSubmit = true;
  
  // 3. 触发按钮点击
  wrapper.find('#login-button').trigger('click');
  
  // 4. 断言submit事件被触发
  expect(wrapper.emitted('submit')).toBeTruthy();
  // 可选：校验事件传递的参数
  expect(wrapper.emitted('submit')[0][0]).toEqual({
    username: 'test_user',
    password: 'test_pass'
  });
});

第三步：可选优化表单提交体验 #

将按钮类型改为submit，并监听表单的submit事件，支持回车提交：

<form @submit.prevent="submit">
  <button type="submit" id="login-button" :disabled="!enableSubmit">Submit</button>
</form>

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