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

Question

我正在使用 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.*/
  })
})

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

Answer 1

欢迎使用 stackoverflow。我不是开玩笑的大专家，您提供的代码非常少，但我想到的问题是您对 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.
}

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