TypeError: (0 , _testUtils.createLocalVue) 不是函数答案

【问题标题】：TypeError: (0 , _testUtils.createLocalVue) is not a functionTypeError: (0 , _testUtils.createLocalVue) 不是函数
【发布时间】：2021-06-30 02:58:07
【问题描述】：

这是我的代码。有人可以帮我找出错误吗。我正在使用 jest 来测试我使用 Vue 构建的前端。行 const localVue = createLocalVue();给出错误 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 '@/components/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)
  })

})

【问题讨论】：

标签： vue.js unit-testing jestjs

【解决方案1】：

createLocalVue 在 @vue/test-utils 的第 2 版中被删除，这解释了为什么它在您的示例中未定义。

要安装 Vue 插件（例如 Vuex），请使用 global.plugins mounting option
要模拟实例 API（例如 this.$store），请使用 global.mocks mounting option

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

const store = /* Vuex store */

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

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

【讨论】：

@JohnSchmidt localVue 经常用于设置 Vue 插件，现在使用 global.plugins 安装选项完成。如果你需要在你的组件中模拟this.$store，你可以使用global.mocks。

【解决方案2】：

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],
    },
    computed: { showAlert: () => false },
  })
})
//now you can do the test
test('Home', async () => {
  expect(wrapper.vm.showAlert).toBe(false)
})

【讨论】：