开玩笑的单元测试不会等待 axios 响应

Posted 2023-02-22

【中文标题】开玩笑的单元测试不会等待 axios 响应

【英文标题】：Jest unit test wont await axios response

【发布时间】：2019-10-08 01:05:57

【问题描述】：

我正在使用 jest 对我的 vue-electron 项目进行单元测试。在给定的测试中，我伪造了一个按钮单击以引发一系列事件。在那个链的某个地方，我向服务器发出 axios 请求，接收数据。但是，测试不会等待结果，而是继续进行，然后崩溃，因为结果还没有出现。

首先，我确保请求的参数和地址正确，它们是正确的。之后，我尝试在测试时是否在组件中定义了“axios”，情况也是如此。比我确保如果发送该请求，正确的响应是接收者，情况也是如此。当然，我使我的测试异步，希望它现在可以等待结果，但事实并非如此。

组件：

async functionInChain()
const response = await axios(
      url: myUrl,
      method: 'POST',
      responseType: 'arraybuffer',
      params: 
        // bind params
      ,
    )
    .then((resp: any) => 
        // this goes wrong
    )

测试：

describe('component.vue', async() => 
test('call runBot() and see if it reacts', async() => 
    wrapper.find('v-btn.button-i-use').trigger('click')
    /*later on i expect a value to be true, however it never is. 
By setting different "checkpoints" i found out things go wrong in the axios request.*/
  )
)

我没有得到任何错误，它只是不会工作

【问题讨论】：

该问题不包含所有相关代码。 functionInChain 不是整个组件。请提供***.com/help/mcve。

【参考方案1】：

欢迎使用 ***。我不是开玩笑的大专家，您提供的代码非常少，但我想到的问题是您对 await 和承诺的使用。

Async 和 await 语法是作为一种糖来引入的，以使 Promise 更好。如果您使用await，则不再需要在函数调用中使用.then。相反，您在await 之后继续您的代码。所以你的组件代码应该更像下面这样。

旧代码：

async functionInChain()
  const response = await axios(
    url: myUrl,
    method: 'POST',
    responseType: 'arraybuffer',
    params: 
      // bind params
    ,
  )
  .then((resp: any) => 
      // continue
  )

新代码：

async functionInChain()
  const response = await axios(
    url: myUrl,
    method: 'POST',
    responseType: 'arraybuffer',
    params: 
      // bind params
    ,
  )

  // continue, as if you were now in the ".then" function, because you "await"ed.

如果这不能解决问题，那么值得用一个我们可以自己运行的完整示例来更新您的问题。为此，您应该创建一段最少的代码来重现问题并发布（而不是您的整个代码解决方案）。

【讨论】：

关于then 的评论是正确的，但这不是答案。可以是评论。这些 sn-ps 是完全可以互换的。真正的问题是在测试中没有等待来自 functionInChain 的承诺。

我认为如果是这样的话，这不是一个正确的答案可能是公平的，但鉴于缺乏代码，我相信这是一个公平的回答尝试。