Vue Jasmine测试中两种点击触发方式得到不同结果的问题

• Vue Test Utils 的 trigger 方法触发的事件默认会向上冒泡，且不会自动阻止元素的默认行为。
• 你子组件内部 data-ut="Movie-content" 的 div 外层包裹的是动态组件，从属性名 linkProps 和 unType 可以推断该动态组件在测试环境下渲染为 <a> 标签，且绑定了包含 href 的链接属性。
• 第二种触发方式点击 div 后，事件冒泡到外层的 a 标签，触发了 href 跳转的默认行为，导致测试环境页面重载，抛出对应错误。
• 第一种使用的 triggerEvent 属于封装后的工具方法，默认阻止了事件冒泡或者默认行为，因此不会触发跳转，测试可以正常通过。

你可以根据测试需求选择任意一种方案：

1. 触发点击时阻止默认行为，避免跳转

this.wrapper.find(testID('Movie-content')).trigger('click', { preventDefault: true });
expect(this.wrapper.emitted().selected).toBeTruthy();

2. 触发点击时阻止事件冒泡，从根源避免事件传递到外层a标签

this.wrapper.find(testID('Movie-content')).trigger('click', { bubbles: false });
expect(this.wrapper.emitted().selected).toBeTruthy();

3. 遵循单元测试逻辑，父组件测试不需要感知子组件内部结构，直接触发子组件的selected事件即可

// 先定位到MovieData子组件，主动触发事件
this.wrapper.findComponent(MovieData).vm.$emit('selected');
expect(this.wrapper.emitted().selected).toBeTruthy();

4. 测试环境下mock子组件的动态组件配置，将外层标签替换为无默认行为的div，避免跳转逻辑触发。

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