Jest 测试 Vue 组件时出现 “TypeError: Cannot read property 'store' of undefined”

在使用 Jest 测试 Vue 组件时，有时候会遇到 “TypeError: Cannot read property 'store' of undefined” 的错误。这个错误通常是因为在测试组件时，没有正确地设置组件的依赖项，导致组件无法正常运行。

原因分析

在 Vue 组件中，经常会使用 Vuex 来管理组件的状态。在测试组件时，需要正确地设置 Vuex 的 store 依赖项，否则组件无法正常运行。如果没有正确地设置 store 依赖项，组件在运行时会尝试访问一个 undefined 的 store 对象，从而导致 “TypeError: Cannot read property 'store' of undefined” 的错误。

解决方案

要解决这个错误，需要在测试组件时正确地设置 Vuex 的 store 依赖项。具体来说，有两种方法可以解决这个问题：

方法一：手动创建 store 对象

在测试组件时，可以手动创建一个 Vuex 的 store 对象，并将其作为组件的依赖项。具体来说，可以在测试文件中创建一个新的 store 对象，并将其传递给组件的 props 属性。示例代码如下：

// javascriptcn.com 代码示例
import { shallowMount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'
import Vuex from 'vuex'

describe('MyComponent', () => {
  let store
  let wrapper

  beforeEach(() => {
    store = new Vuex.Store({
      state: {
        count: 0
      }
    })

    wrapper = shallowMount(MyComponent, {
      propsData: {
        store: store
      }
    })
  })

  it('renders correctly', () => {
    expect(wrapper.element).toMatchSnapshot()
  })
})

在这个示例代码中，我们首先创建了一个新的 Vuex 的 store 对象，然后将其作为组件的 props 属性传递给了组件。这样，组件就可以正确地访问 store 对象，从而避免了 “TypeError: Cannot read property 'store' of undefined” 的错误。

方法二：使用 Vuex 的官方插件

除了手动创建 store 对象以外，还可以使用 Vuex 的官方插件来自动设置 store 依赖项。具体来说，可以使用 vue-test-utils 的 createLocalVue 方法来创建一个本地的 Vue 实例，并在该实例中注册 Vuex 的官方插件。示例代码如下：

// javascriptcn.com 代码示例
import { shallowMount, createLocalVue } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'
import Vuex from 'vuex'

describe('MyComponent', () => {
  let localVue
  let store
  let wrapper

  beforeEach(() => {
    localVue = createLocalVue()
    localVue.use(Vuex)

    store = new Vuex.Store({
      state: {
        count: 0
      }
    })

    wrapper = shallowMount(MyComponent, {
      localVue,
      store
    })
  })

  it('renders correctly', () => {
    expect(wrapper.element).toMatchSnapshot()
  })
})

在这个示例代码中，我们首先使用 createLocalVue 方法创建了一个本地的 Vue 实例，并在该实例中注册了 Vuex 的官方插件。然后，我们创建了一个新的 store 对象，并将其传递给了组件的 props 属性。这样，组件就可以正确地访问 store 对象，从而避免了 “TypeError: Cannot read property 'store' of undefined” 的错误。

总结

在使用 Jest 测试 Vue 组件时，遇到 “TypeError: Cannot read property 'store' of undefined” 的错误，通常是因为没有正确地设置 Vuex 的 store 依赖项。要解决这个问题，可以手动创建一个 store 对象，并将其作为组件的 props 属性传递给组件，或者使用 Vuex 的官方插件来自动设置 store 依赖项。通过正确地设置 store 依赖项，可以确保组件在测试时能够正常运行，从而提高测试的覆盖率和准确性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65631187d2f5e1655dcc4c8f