Error: The function (0 , _testUtils.createLocalVue) is not defined as a function

Question

Error: The function (0 , _testUtils.createLocalVue) is not defined as a function

I need help troubleshooting my code. I am trying to test my Vue frontend using jest, but I keep getting the error message "TypeError: (0 , _testUtils.createLocalVue) is not a function" specifically on the line const localVue = createLocalVue();

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

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

Answer 1

Answer №1

createLocalVue was deprecated in the latest version of @vue/test-utils, which is why it's not defined in your code snippet.

To add a Vue plugin (like Vuex), you can utilize the global.plugins mounting option
If you need to simulate instance APIs (e.g. this.$store), you can use the global.mocks mounting option

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

const store = /* Define your Vuex store here */

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

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

Answer 2

createLocalVue was deprecated in the latest version of @vue/test-utils, which is why it's not defined in your code snippet.

To add a Vue plugin (like Vuex), you can utilize the global.plugins mounting option
If you need to simulate instance APIs (e.g. this.$store), you can use the global.mocks mounting option

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

const store = /* Define your Vuex store here */

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

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

Answer 3

Answer №2

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

simulating a mock store

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

Setting up the Component

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

Proceed with testing

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

Answer 4

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

simulating a mock store

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

Setting up the Component

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

Proceed with testing

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

Error: The function (0 , _testUtils.createLocalVue) is not defined as a function

Answer №1

Answer №2

Similar questions

Error encountered with the Angular 2 routing system

Learn how Angular 2 allows you to easily add multiple classes using the [class.className] binding

Difference Between For Loop and Map Function

Tips for transferring the ID from one element to another using JavaScript

How can I retrieve the SID received in a different tab using MSAL.js?

Increasing the padding at the top of the logo when scrolling down the page

AngularJS personalized date selector directive

The not-found.js file in Next.js is displaying an empty page rather than showing a 404 error message

What methods can be used to enable automatic data updating in angular.js?

Disabling past dates in a React JS application with a React date picker

How can I place a THREE.ArrowHelper on a specific layer in Three.js?

I'm looking to extract various data from a SQLite table using the URL with ExpressJS. What's the best way to achieve

Using jQuery to locate a JavaScript variable is a common practice in web development

Multi-line D3 chart that dynamically updates and intersects with the axis

Is it possible to determine the number of JSON properties without the need for a loop?

After implementing ajax, jQuery ceases to function

Navigating the complexities of integrating Angular-based JS select/input values using CefSharp Offscreen on an external website: A comprehensive guide

What are the steps to halt background uploads?

Obtain a string of characters from different words

Issue with loading HTML file correctly in Django