[Vuejs]-How to add fake store in shallowMount() using vue3 + typescript in jest unit tests?

0👍

SOLUTION

I used documentation for vuejs 2, so the documentation for vuejs 3 is here : https://next.vue-test-utils.vuejs.org/guide/advanced/vuex.html#testing-with-a-real-vuex-store

Here is my test

import { shallowMount } from "@vue/test-utils";
import ProjectItem from "@/components/ProjectItem.vue";
import { projects } from "@/store/projects";
import { state } from "@/data/fakeStore/projects";
import Vuex from "vuex";

describe("ProjectItem.vue", () => {
  const store = new Vuex.Store({
    modules: {
      projects: {
        namespaced: true,
        state,
        getters: projects.getters
      }
    }
  });

  const wrapper = shallowMount(ProjectItem, {
    props: {
      index: 0
    },
    global: {
      plugins: [store]
    }
  });

  wrapper.vm.projects = state.projects;
  wrapper.vm.skills = state.skills;

  it("check initialization data", () => {
    expect(wrapper.vm.projects).toEqual(state.projects);
    expect(wrapper.vm.skills).toEqual(state.skills);
    expect(wrapper.vm.index).toEqual(0);
  });
});

Leave a comment