使用vue-test-utils时触发Vue警告：created钩子getters未定义错误求助

Hey there! That error is super common when testing Vue components that rely on Vuex—your component is trying to access this.$store.getters, but the test instance doesn't have a Vuex store injected (so $store is undefined). Let's walk through how to fix this quickly.

Common Causes #

First, double-check your component: it’s probably using either direct calls like this.$store.getters.yourGetter or the mapGetters helper to pull in Vuex state. Without a store provided in your test, Vue can’t resolve those references.

Solutions to Try #

1. Quick Fix: Mock the Store via mocks Option #

The simplest way is to pass a mock $store directly when mounting your component. This works great for components that only use a few getters:

import { mount } from '@vue/test-utils';
import YourComponent from '@/components/YourComponent.vue';

describe('YourComponent', () => {
  it('renders without Vuex errors', () => {
    const wrapper = mount(YourComponent, {
      mocks: {
        $store: {
          getters: {
            // Match the exact getter names your component uses
            userName: 'Preeti Kumari',
            isAuthenticated: true
          }
        }
      }
    });

    // Add your test assertions here
    expect(wrapper.text()).toContain('Preeti Kumari');
  });
});

2. Mock Computed Properties Directly (For mapGetters Users) #

If your component uses mapGetters to create computed properties, you can skip mocking the entire store and just mock the computed properties themselves:

import { mount } from '@vue/test-utils';
import YourComponent from '@/components/YourComponent.vue';

describe('YourComponent', () => {
  it('works with mocked computed properties', () => {
    const wrapper = mount(YourComponent, {
      computed: {
        // Use the same name as the computed property from mapGetters
        userName: () => 'Test User',
        isAuthenticated: () => false
      }
    });

    // Test logic here
  });
});

3. Full Mock Store (For Complex Components) #

If your component interacts with multiple getters, actions, or mutations, create a proper mock Vuex store instance with createLocalVue:

import Vuex from 'vuex';
import { createLocalVue, mount } from '@vue/test-utils';
import YourComponent from '@/components/YourComponent.vue';

const localVue = createLocalVue();
localVue.use(Vuex);

describe('YourComponent', () => {
  let store;

  // Reset the store before each test
  beforeEach(() => {
    store = new Vuex.Store({
      getters: {
        userName: () => 'Preeti Kumari',
        isAuthenticated: () => true
      },
      // Add mocked actions/mutations if your component uses them
      actions: {
        fetchUser: jest.fn()
      }
    });
  });

  it('interacts with Vuex correctly', () => {
    const wrapper = mount(YourComponent, {
      localVue,
      store
    });

    // Example: Test that an action is dispatched
    wrapper.find('button').trigger('click');
    expect(store.actions.fetchUser).toHaveBeenCalled();
  });
});

Quick Troubleshooting Tips #

• Double-check that you’re passing the mocks or store option to mount()/shallowMount()—it’s easy to forget!
• Make sure the getter names in your mock match exactly what’s in your component (watch for typos or casing issues).
• If you’re using shallowMount, this error isn’t related to shallow rendering—it’s strictly about missing Vuex injection.

Give these methods a shot, and you should be able to get past the error and keep writing your tests.

内容的提问来源于stack exchange，提问作者Preeti Kumari