如何对使用 Axios（或其他异步更新）的 Vue 组件进行单元测试？

Posted 2023-02-22

【中文标题】如何对使用 Axios（或其他异步更新）的 Vue 组件进行单元测试？

【英文标题】：How to unit test Vue component that uses Axios (or other async update)?

【发布时间】：2019-05-16 09:25:02

【问题描述】：

我有一个 Vue 组件/视图，它使用 Axios 执行 API 请求并使用响应更新组件数据。我正在使用 Moxios 在单元测试中模拟 Axios 请求。

我尝试使用Vue.nextTick 来推迟更新数据的断言，但此时组件尚未更新。如果我添加延迟，则断言可以正常工作：

setTimeout(() => 
    expect(wrapper.text()).toMatch('Updated text')
    done()
, 500)

但是，这是一种不好的做法，会减慢测试速度并且是一种竞争条件。

每次组件更新时都会调用某种断言检查吗？本质上，我正在寻找类似的东西：

Vue.eventually(() => 
    expect(wrapper.text()).toMatch('Updated text')
    done()
)

【问题讨论】：

你想测试什么？

我想测试一下异步操作是否正确更新了组件。

【参考方案1】：

通用（非 Vue 特定）解决方法：

const test = () => 
    try 
        expect(wrapper.text()).toMatch('Updated text')
        done()
     catch (e) 
        setTimeout(test, 1)
    

setTimeout(test, 1)

但是，expect 中的任何失败都将被忽略，如果失败，测试将超时且不显示任何消息。