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

Question

作为 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":{}}}

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

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

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

非常感谢

更新:

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

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

Answer 1

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

切换到 cypress.io - 非常棒。

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

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

vue integration test with axios and real server calls

mocha.js

vue.js

vue-test-utils

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

vue integration test with axios and real server calls

mocha.js

vue.js

vue-test-utils

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