Usage with Vue and Jest

This issue has been tracked since 2017-07-29.

I have a test as below:

import axios from 'axios';
import moxios from 'moxios';
import Vue from 'vue/dist/vue.js';
...

window.axios = axios;

describe('Component', () => {
    Vue.component('component', Component);
    ...
    ...

    beforeEach(function () {
      // mock axios
      moxios.install(window.axios);
    })

    afterEach(function () {
      // remove mock
      moxios.uninstall(window.axios)
    })

    ...

    it('does something action on click', async() => {
        document.body.innerHTML = `
            <div id="app">
                <component :data="[{id: 1, something: 'else'}]"
                ></component>
            </div>
        `;

        const component = await createVm();

        var button = document.querySelector('.button.is-success');
        button.click();

        await Vue.nextTick(() => {});

        moxios.wait(function () {
            let request = moxios.requests.mostRecent()
            request.respondWith({
                status: 200,
                response: []
            }).then(function () {
                expect(component.data.something).toBe('newness');
                done();
            })
        });
    });
});

async function createVm() {
    const vm = new Vue({
        el: '#app',
    });

    await Vue.nextTick(() => {});

    const component = vm.$children[0];

    return component;
}

The component has a method which is triggered by the button click and has this

axios.post(actionUrl, postData)
    .then( (response) => {
        this.data.something = 'new';
    })
    .catch( (error) => {
        console.log('failed ' + error.status);
    });

I had expected the test to fail, but it doesn't. The component works as desired (checked in a browser). Also doing a console.log() before the axios call also shows up during the test.

However, the axios part is not working. Doing a console.log() doesn't show anything from inside the moxios then() call. It's clear that I am doing something wrong I suppose, just not sure what it is.

Appreciate any insights! 👍

anilanar wrote this answer on 2018-05-27

Kamino cloned this issue to anilanar/moxios

More Details About Repo
Owner Name axios
Repo Name moxios
Full Name axios/moxios
Language JavaScript
Created Date 2016-05-25
Updated Date 2022-12-05
Star Count 1386
Watcher Count 20
Fork Count 85
Issue Count 19

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date