vue 与 axios 和真实服务器调用的集成测试答案

【问题标题】：vue integration test with axios and real server callsvue 与 axios 和真实服务器调用的集成测试
【发布时间】：2020-09-28 17:25:50
【问题描述】：

作为 vue 测试的新手，我正在尝试使用 axios 和 mocha 为我们的 Vue SPA 进行集成测试。

我希望进行一些测试以使真正 api 调用到我们的服务器无需模拟，以确定它是否真的从头到尾都有效。服务器 API 是一个 Laravel 7 应用程序，具有 laravel/sanctum 和基于 cookie 的会话身份验证。

我可以像这样直接在测试文件中进行真正的 axios 调用：

import authApi from '../../src/components/connections/auth';

describe('AxiosCallTest', () => {
  it('makes an axios call', function(done) {
    this.timeout(5000);

    authApi.get('/sanctum/csrf-cookie').then((response) => {
      console.log('response: ', JSON.stringify(response));
      done();
    }).catch(() => {
      done();
    });
  });
});

// -> response:  {"data":"","status":204,"statusText":"No Content","headers":{"cache-control":"no-cache, private"},"config":{"url":"/sanctum/csrf-cookie","method":"get","headers":{"Accept":"application/json","X-Requested-With":"XMLHttpRequest"},"baseURL":"http://testing.backend.vipany.test/api/auth","transformRequest":[null],"transformResponse":[null],"timeout":30000,"withCredentials":true,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"axios-retry":{"retryCount":0,"lastRequestTime":1591774391768}},"request":{"upload":{"_ownerDocument":{"location":{"href":"http://localhost/","origin":"http://localhost","protocol":"http:","host":"localhost","hostname":"localhost","port":"","pathname":"/","search":"","hash":""}}},"_registeredHandlers":{},"_eventHandlers":{}}}

我已经阅读并尝试了很多，现在有两个问题：

为 CSRF 令牌 Cookie 和会话 Cookie（用于身份验证）处理 cookie，就像在常规请求中浏览器开箱即用地处理这个一样。
等待 vue 组件中的 axios 调用，因为我不能在组件本身中使用 mocha 的 done() 函数，就像我在本示例中所做的那样。我只能找到使用 moxios 或类似的模拟请求的示例。但我不想模拟 axios 调用。

有没有人知道一篇关于这些问题的好文章或已经解决了它？

非常感谢

更新：

我找到了一个 article 来从 axios 请求中获取 cookie，并自己尝试从响应中获取 X-XSRF-TOKEN（我在浏览器中检查过：HttpOnly: false，安全：假），但它不起作用：

  console.log('response X-XSRF-TOKEN: ', response.config.headers['X-XSRF-TOKEN']); 
  // -> undefined

【问题讨论】：

标签： vue.js mocha.js vue-test-utils

【解决方案1】：

发现 cypress 和 nightwatch 是端到端测试 (e2) 的正确工具。
不知道正确的术语（e2e 或端到端测试）和正确的工具。

切换到 cypress.io - 非常棒。

vue-cli 甚至有集成 cypress 或 nightwatch 的第一手插件：https://cli.vuejs.org/core-plugins/e2e-cypress.html

【讨论】：