Vitest中Mock无法触发执行的问题求助

你遇到的这个问题核心是异步事件循环的时序问题，加上Vitest测试的同步执行特性导致的。

为什么会出现这种诡异现象？ #

• 当你注释最后一个断言时，测试代码执行完postMessage触发逻辑后就直接结束了——而message事件的回调是在异步事件队列里的，测试没等队列执行就终止，所以mock的messageHandler根本没机会运行。
• 当你保留断言时，Vitest会在等待断言验证的过程中让事件循环继续执行，这时候messageHandler才被调用，但因为你没主动等待异步操作完成，断言执行时mock还没被触发，所以断言失败，但之后mock确实执行了，就出现了「断言失败但mock被执行」的矛盾现象。

解决步骤 #

1. 确保事件监听已完成注册

你的test-helper.js必须正确触发Vue的生命周期钩子（比如onMounted），确保可组合式里的window.addEventListener('message', ...)在触发postMessage之前已经完成注册。

2. 主动等待异步事件完成

在触发message事件后，需要让Vitest等待事件循环执行完毕，常用的方法有两种：

• 使用await vi.runAllTicks()：执行所有微任务队列里的回调
• 使用await flushPromises()：如果你的可组合式里用到了Vue的响应式，这个方法更合适

3. 正确模拟message事件

不要直接调用postMessage（因为iframe环境是模拟的），而是构造标准的MessageEvent并通过window.dispatchEvent触发，确保事件能被监听器捕获。

示例测试代码 #

import { mountComposable } from './test-helper'
import { useIframeCommunication } from '../composables/useIframeCommunication'
import { vi, expect, test } from 'vitest'

test('messageHandler should be called when receiving postMessage', async () => {
  // 创建mock handler
  const messageHandler = vi.fn()

  // 挂载可组合式，确保生命周期钩子触发，事件监听注册完成
  await mountComposable(() => useIframeCommunication(messageHandler))

  // 构造并触发message事件
  const testEvent = new MessageEvent('message', {
    data: 'test payload',
    origin: window.origin // 确保源匹配，避免可组合式里的源校验过滤事件
  })
  window.dispatchEvent(testEvent)

  // 等待异步事件回调执行
  await vi.runAllTicks()

  // 执行断言
  expect(messageHandler).toHaveBeenCalledWith('test payload')
})

额外检查点 #

• 确认你的可组合式里没有对origin做严格校验，或者在测试里传入匹配的origin，避免事件被过滤
• 确保messageHandler mock是在可组合式初始化前定义的，不会被内部的函数覆盖

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