Как правильно тестировать роуты во VueJS?

Question

[Степан Кормилин]

Для тестирования сейчас использую vue-test-utils и jest

Пытаюсь сделать примерно следующее:
1) если юзер авторизован, то спокойно переходим в роут
2) если нет, то без перехода рендерим форму с авторизацией

Answer 1

[FullStack Alex]

Потерял вчера целый день пытаясь решить эту казалось бы простую проблему.
Но как в итоге выяснил Vue-Test-Utils не предусматривает изменения во vue-router:

Dealing with Routing
Since routing by definition has to do with the overall structure of the application and involves multiple components, it is best tested via integration or end-to-end tests. For individual components that rely on vue-router features, you can mock them using the techniques mentioned above.

Поэтому для подобной задачи нужно использовать E2E testing tools как Puppeteer, TestCafe и Cyprus. Или же (что я сейчас пока лишь пробую, но может сегодня более подробно описать смогу) не использовать vue-test-utils wrapper а использовать реальную Vue rendered app.

Update:
Ок, решил проблему.
Vue-Test-Utils нельзя использовать из-за createLocalVue() и mount(), так как обе функции не дают возможность использовать для создания Vue инстанции "Full UMD bundler" .

Vue-Test-Utils сделан для максимальной изоляции компоненты. Хотя добавить FULL UMD поддержку казалось бы не такая уж и большая задача, но увы.

Поэтому нужно как уже и писал обходится без vue-test-utils. А так как я ненавижу Facebook - я принципиально не использую Jest, Yarn, React итп (по крайней мере в личных проектах), а использую Mocha + Chai + Sinon + jsdom, но принцип один и тот же, да и синтаксис практически такой же:

import chai from "chai";
const expect = chai.expect;
const should = chai.should();

import App from '~/testing-router-without-wrapper/App.vue';

import VueRouter from 'vue-router';
import router from '~/testing-router-without-wrapper/router.js';

//https://github.com/vuejs/vue-router/issues/713
import Vue from "vue/dist/vue.js";
Vue.use(VueRouter);

//jsdom создаст HTML документ но так как я в своём app ссылаюсь везде на #app в функции app container, нужно создать соответсвующий элемент:
let element = document.createElement("div");
element.id = "app";
const myApp = new Vue({
    el: element,
    router,
    render: h => h(App),
    components: {App},
});

describe('Testing App.vue with Route 1', () => {

    it('Title of Home component is true', () => {
        console.log( "myApp.$el.innerHTML", myApp.$el.innerHTML );
        expect(myApp.$el.innerHTML.includes('<h1 id="title">Home Title</h1>')).to.be.true;
    });

    it('Pushing Route1 and checking title of Route1 component is true', done => {
        myApp.$router.push('/route1');
        setTimeout(()=>{
            console.log( "myApp.$el.innerHTML", myApp.$el.innerHTML );
            expect(myApp.$el.innerHTML.includes('<h1 id="title">Route 1 Title</h1>')).to.be.true;
            done();
        },1000);

    });
});