VueJS HTTP测试：Mock请求结果未反映到组件渲染问题排查

你的测试逻辑从根上写反了：你在测试用例里手动调用了axios.post发请求，从头到尾没触发组件自身的提交逻辑，组件根本没接收到请求返回结果，自然不会更新DOM渲染错误提示。
你当前测试的执行流程是：

• 挂载组件
• 配置接口Mock规则
• 测试代码自己发了一次axios请求，验证这个手动发的请求正常、返回值符合预期
• 直接去组件DOM里找错误提示元素
  整个流程里组件既没有收到点击提交的事件，也没有执行自己内部的请求发送、错误处理逻辑，当然不会渲染.error--text。你之前手动给wrapper.vm.errors赋值能通过断言，本质是你跳过了组件自身的逻辑，强行改了组件内部状态触发更新，和Mock本身没有关系。

按用户真实操作流程写用例即可，核心是所有交互操作都要await等待异步逻辑、DOM更新完成后再做断言，不要自己在测试里代发请求。
完整可运行的示例代码：

import { mount } from '@vue/test-utils'
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
import LoginForm from '@/components/LoginForm.vue' // 替换为你的组件实际路径

// 初始化Mock实例，每个用例执行完重置状态，避免用例间互相影响
const mock = new MockAdapter(axios)
afterEach(() => {
  mock.reset()
  jest.restoreAllMocks()
})

describe("接口返回提交失败时", () => {
  it('正确渲染错误提示', async () => {  
    // 1. 提前配置Mock返回规则
    const mockResult = { email: ["邮箱不能为空"], password: ["密码不能为空"] }
    const submitApiUrl = '/api/login' // 替换为组件实际调用的接口地址
    mock.onPost(submitApiUrl).reply(422, mockResult)

    // 2. 挂载组件，你之前加的attachTo配置没有问题，不需要删除
    const wrapper = mount(LoginForm, {
      attachTo: document.body
    })

    // 3. 模拟用户真实操作：点击提交按钮，必须加await等待所有逻辑执行完成
    await wrapper.find('button[type="submit"]').trigger('click')
    // 保险起见可以等待下一轮DOM更新，大部分场景不加也能过
    await wrapper.vm.$nextTick()

    // 4. 按顺序做断言
    // 先验证请求确实是组件触发的
    expect(mock.history.post.length).toBe(1)
    // 再验证DOM渲染结果
    expect(wrapper.find('.error--text').exists()).toBe(true)
    expect(wrapper.text()).toContain("邮箱不能为空")
  })
})

如果觉得axios-mock-adapter配置繁琐，直接用Jest内置能力Mock整个axios模块即可，不需要额外依赖：

// 测试文件顶部直接声明Mock
jest.mock('axios', () => ({
  post: jest.fn()
}))

// 用例内配置失败返回
axios.post.mockRejectedValueOnce({
  response: {
    status: 422,
    data: mockResult
  }
})
// 后续挂载、触发点击、断言逻辑和上面的示例完全一致

• 所有和组件交互的方法（trigger/setValue/setProps等）都要加await，Vue Test Utils会自动等待响应式更新、微任务队列执行完成，不需要自己手写setTimeout或者自定义Promise等待
• 如果组件提交逻辑加了防抖/节流，配合jest.useFakeTimers()快进时间即可，不要真实等待定时器执行
• 不要在测试用例里直接调用组件依赖的第三方方法（比如这里的axios.post），这类方法要么Mock掉，要么通过组件的交互触发内部调用，否则测试逻辑和组件实际运行逻辑完全脱节，测了等于没测

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