This is my code. Can some please help me figure out the error.I am using jest to test out my frontend which I have built using Vue.The line const localVue = createLocalVue(); is giving out the error TypeError: (0 , _testUtils.createLocalVue) is not a function

import { createLocalVue,shallowMount  } from '@vue/test-utils'
import Vuex from 'vuex'
import getters from '../../src/store/module/auth/getters.js'
import TheHeader from '@/ponents/layout/TheHeader.vue'



// const store = new Vuex.Store({
//     state: {
//         user:null,
//         token:'',
//         expiresIn:null,
//         isUserLoggedIn:false,
//         isAdminLoggedIn:false,
//     }
//   })


describe('TheHeader', () => {
  const localVue = createLocalVue();
  localVue.use(Vuex);
  let store
  let state
 
  it('Checks whether the login is correctly displayed', () => {
    const cmp = shallowMount(TheHeader, { store,localVue})
    expect(cmp.name()).toMatch('TheHeader')
    expect(cmp.vm.isLoggedIn()).toBe(false)
  })

})

This is my code. Can some please help me figure out the error.I am using jest to test out my frontend which I have built using Vue.The line const localVue = createLocalVue(); is giving out the error TypeError: (0 , _testUtils.createLocalVue) is not a function

import { createLocalVue,shallowMount  } from '@vue/test-utils'
import Vuex from 'vuex'
import getters from '../../src/store/module/auth/getters.js'
import TheHeader from '@/ponents/layout/TheHeader.vue'



// const store = new Vuex.Store({
//     state: {
//         user:null,
//         token:'',
//         expiresIn:null,
//         isUserLoggedIn:false,
//         isAdminLoggedIn:false,
//     }
//   })


describe('TheHeader', () => {
  const localVue = createLocalVue();
  localVue.use(Vuex);
  let store
  let state
 
  it('Checks whether the login is correctly displayed', () => {
    const cmp = shallowMount(TheHeader, { store,localVue})
    expect(cmp.name()).toMatch('TheHeader')
    expect(cmp.vm.isLoggedIn()).toBe(false)
  })

})

• javascript
• vue.js
• unit-testing
• jestjs

2 Answers 2

createLocalVue was removed in version 2 of @vue/test-utils, which explains why it's undefined in your example.

• To install a Vue plugin (such as Vuex), use the global.plugins mounting option

• To mock instance APIs (such as this.$store), use the global.mocks mounting option

import Vuex from 'vuex'
import { shallowMount } from '@vue/test-utils'
import TheHeader from '@/ponents/TheHeader.vue'

const store = /* Vuex store */

const cmp = shallowMount(TheHeader, {
  global: {
    plugins: [Vuex],

    // OR:
    mocks: {
      $store: store,
    }
  }
})

import { mount } from '@vue/test-utils'
import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from '@/views/Home'

creating a fake store

const store = createStore({
  state() {
    return {
      count: 0,
      user: {},
    }
  },
  mutations: {
    increment(state) {
      state.count += 1
    },
  },
})

Creating the Component

const app = createApp(App)
app.use(store)
let wrapper
beforeEach(() => {
  wrapper = mount(App, {
    global: {
      plugins: [store],
    },
    puted: { showAlert: () => false },
  })
})

now you can do the test

test('Home', async () => {
  expect(wrapper.vm.showAlert).toBe(false)
})