mocking-axios

Mocking axios

Axios is a 3rd party CommonJS module installed in node_modules and used from Vue components. To mock such module you have 3 choices, depending on how it is used.

Named import

If the component imports a single named property from a CommonJS module, the spec file can require the entire module and stub a property using cy.stub command.

// component code
import { get } from 'axios'
get('...').then(...)

// spec file uses "require" to load the CommonJS module
const Axios = require('axios')
cy.stub(Axios, 'get').resolves({
  data: [
    {
      id: 101,
      name: 'Test User',
    },
  ],
})

See 1-Users.vue and 1-Users.spec.js files.

Method

If the component imports the entire CommonJS module, then calls its method, you still require the same module from the spec file.

// component code
import axios from 'axios'
axios.get('...').then(...)

// spec file uses "require" to load the CommonJS module
const Axios = require('axios')
cy.stub(Axios, 'get').resolves({
  data: [
    {
      id: 101,
      name: 'Test User',
    },
  ],
})

See 1-Users.vue and 1-Users.spec.js files.

Wrapped module

Sometimes the component code uses an intermediate ES6 wrapper module, like AxiosApi.js that re-experts the CommonJS module; you can then mock those exports.

// AxiosApi.js
export * from 'axios'

3-Users.vue shows the component that imports from AxiosApi.js

import { get } from './AxiosApi'

The test 3-Users.spec.js mocks the "get" import.

import Users from './Users.vue'
import * as AxiosApi from './AxiosApi'

cy.stub(AxiosApi, 'get')
  .resolves({
    data: [
      {
        id: 101,
        name: 'Test User',
      },
    ],
  })
  .as('get')

mount(Users)