Search code examples
vue.jsmocha.jsvue-test-utils

vue integration test with axios and real server calls


Beeing new to vue testing, I'm trying to make an integration test for our Vue SPA with axios & mocha.

I want some of the tests to make real api calls to our server without mocking, to figure out if it really works from the beginning to the end. The server API is a Laravel 7 app with laravel/sanctum and cookie based session authentication.

I can make real axios calls directly in the test file like this:

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

I've read and tried a lot and now have 2 problems:

  • handling cookies for CSRF Token Cookies and Session Cookies (used for authentication), as on conventional requests the browser handles this out of the box.
  • waiting on axios calls in vue components, as I can't use mocha's done() function in the components itself, as I did in this example. I can only find examples with mocking requests with moxios or similiar. But I don't want to mock the axios calls.

Does anyone know a good article about these issues or has already solved it?

Thanks a lot


update:

I've found an article to get the cookie out of the axios request and tried it myself to get the X-XSRF-TOKEN out of the response (I've checked it in the browser: HttpOnly: false, secure: false), but it does not work:

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

Solution

  • Found out that cypress and nightwatch are the right tools for end-to-end testing (e2).
    Didn't know the right terms (e2e or end-to-end testing) and the right tools.

    Switched to cypress.io - absolutly great.

    vue-cli even has first hand plugins to integrate cypress or nightwatch: https://cli.vuejs.org/core-plugins/e2e-cypress.html