Vue单元测试出现expected empty value报错，console.log断言失败如何修复

1. 修正Apollo Query模拟返回字段 #

业务代码读取的是response.data.Verify，但当前模拟返回的根字段为signup，字段不匹配是导致数据读取异常的核心原因，修改模拟逻辑：

// 修正前的错误模拟
jest.mock('@vue/apollo-composable', () => ({
  useQuery: jest.fn(() => ({
    result: ref({
      signup: { input: { username: "123456" } } // 字段与业务读取逻辑不匹配
    })
  }))
}))

// 修正后的模拟
jest.mock('@vue/apollo-composable', () => ({
  useQuery: jest.fn(() => ({
    result: ref({
      // 根字段改为业务需要的Verify，同时补全预期的完整返回结构
      Verify: { input: { username: "123456" }, verificationCode: null }
    })
  }))
}))

必须保证模拟返回的字段层级、结构和业务代码读取逻辑完全一致，否则会出现读取值为undefined的问题

2. 修正console.log断言逻辑 #

当前实际触发两次console.log调用，和你预期的单次调用不符，可二选一调整：

方案A：修改业务代码日志输出，匹配预期的单次调用 #

把分开打印的两行日志合并成一次输出：

// 修正前的业务代码
console.log("USER:", user)
console.log("verificationCode: ", verifyData)

// 修正后的业务代码
console.log("USER:", user, verifyData)

方案B：修改测试断言，匹配实际的两次调用 #

如果不需要改动业务代码，调整测试的断言逻辑即可：

// 验证总调用次数
expect(console.log).toHaveBeenCalledTimes(2)
// 验证第一次调用参数
expect(console.log).toHaveBeenNthCalledWith(1, "USER:", undefined)
// 验证第二次调用参数
expect(console.log).toHaveBeenNthCalledWith(2, "verificationCode: ", {"input": {"username": "123456"}})

3. 额外注意事项 #

• 若测试涉及Vue响应式更新，断言前需要调用await nextTick()等待逻辑执行完成
• 模拟返回的完整结构需要和真实接口约定完全对齐，避免开发和测试环境表现不一致

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