mock up $axios

[kyzia551]

Hi!
I'm trying to test vuex actions like

  async addEmail ({commit}, email) {
    commit('ADD_EMAIL_START')
    try {
      const resp = await this.$axios.$post('/users/addEmail', qs.stringify({ email }))
      commit('ADD_EMAIL_SUCCESSFUL')
    } catch (e) {
      commit('ADD_EMAIL_FAILED', e)
    }
  }

How to mock up $axios this way?

Stack: jest + vue-test-utils
Thank you!

_{This feature request is available on Nuxt.js community (#c91)}

[sobolevn]

@kyzia551 have you found any solution?

@pi0 docs still do not cover testing at all. I can improve them after I will get over this problem.

[pi0]

I didn't dig into this yet. Contributions to the Docs and Code are more than welcome BTW ;)

[Fubinator]

I'm facing the same problem and I have a question regarding that:
Is it really related specifically to the axios module or would one be facing the same problem with other modules/plugins? Whenever I import my store into the tests, this is refering to my actions object (which makes sense) and thus I don't have any modules/plugins injected into the $root element available.

[sobolevn]

I came up with this solution: https://github.com/wemake-services/wemake-vue-template/blob/feature-nuxt/template/tests/unit/pages/index.spec.js#L55

import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'

it('should load new comments on actions', async () => {
    expect.assertions(3)
    const wrapper = mount(Index, { store, localVue, propsData })
    wrapper.vm.$axios = axios

    const mock = new MockAdapter(wrapper.vm.$axios)
    mock.onGet('/comments').reply(200, [mockedComment])

    await wrapper.vm.$store.dispatch('fetchComments', wrapper.vm)
    expect(wrapper.vm.$store.state.comments.length).toBe(1)
    expect(wrapper.vm.$store.state.comments[0].email).toBe(mockedComment.email)

    wrapper.vm.$nextTick(() => {
      expect(wrapper.findAll('.comment__component').length).toBe(1)
    })
})

[Fubinator]

I've played a bit around with your solution @sobolevn
I ended up "injecting" axios into the store instance so it is available when using this. Maybe this is going to help someone with my specific problem.

test.beforeEach(() => {
  store = createStore({
    actions,
    getters,
    state,
    mutations
  }, {
    mockState
  })
  store.$axios = axios;
})

test('foo', async t => {
  const wrapper = mount(Index, {
    store,
    localVue
  });
  const mock = new MockAdapter(store.$axios);
  mock.onGet('/foo/1').reply(200, mockState.active);

  await wrapper.vm.$store.dispatch('foo', 1);
  
  // assertions...
})

[Oliboy50]

to unit test an action which use this.$axios, the trick is to bind your axios mock to the action function

store file:

// store/index.js

export default {
  actions: {
    async getResults (context, payload) {
      return await this.$axios.$get('/api/something');
    },
  },
};

store test file:

// store/__tests__/index.test.js

import store from '../index.js';
import axios from 'axios';

let mockAxiosGetResult;
jest.mock('axios', () => ({
  $get: jest.fn(() => Promise.resolve(mockAxiosGetResult)),
}));

let action;
const testedAction = (context = {}, payload = {}) => {
  return store.actions[action].bind({$axios: axios})(context, payload);
};

describe(`store`, () => {
  describe(`actions`, () => {
    describe(action = 'getResults', () => {
      it(`returns an empty array if axios returns an empty array`, async (done) => {
        mockAxiosGetResult = [];
        expect(await testedAction()).toEqual([]);
        done();
      });
    });
  });
});

[vinayakkulkarni]

I don't want to use jest, any alternatives?

[jaydadhaniya]

I am testing vuex store and for API call I have used @nuxtjs/$axios in an actual store
So while executing test case it's throwing error this.$axios.$get is not a function
any update on this

[vinayakkulkarni]

@jaydadhaniya : https://github.com/vinayakkulkarni/nuxt-ava-e2e-unit-testing

Maybe that'll help?

[pascal-reuse]

I found also this example from which I could inspire and have a working test case for my vuex action which is using @nuxtjs/$axios

Nuxt.js + Jest

It's also using the trick to bind your axios mock to the action function as proposed by @Oliboy50

[ricardogobbosouza]

@pi0 I think this can be closed