How to properly test routes in VueJS?

Question

Vue.js

I'm currently using vue-test-utils and jest
for testing. I'm trying to do something like this:
1) if the user is authorized, then calmly go to the route
2) if not, then without transition, render the form with authorization

Answer 1

Lost a whole day yesterday trying to solve this seemingly simple problem.
But as Vue-Test-Utils eventually found out, there is no change to vue-router:
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.
Therefore, for such a task, you need to use E2E testing tools like Puppeteer, TestCafe and Cyprus. Or (which I am just trying now, but maybe I can describe in more detail today) do not use the vue-test-utils wrapper but use a real Vue rendered app.
Ok, solved the problem.
Vue-Test-Utils can't be used because of createLocalVue() and mount() , since both functions prevent you from using "Full UMD bundler" instances to create Vue .
Vue-Test-Utils is made for maximum component isolation. Although it would seem that adding FULL UMD support would not be such a big task, but alas.
Therefore, as already written, it is necessary to do without vue-test-utils. And since I hate Facebook, I basically don’t use Jest, Yarn, React, etc. (at least in personal projects), but I use Mocha + Chai + Sinon + jsdom, but the principle is the same, and the syntax is almost the same:

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);

    });
});