title: How to add fake store in shallowMount() using vue3 + typescript in jest unit tests?
body: <p>I'm lost I read documentation to be able to add fake <code>store</code> in <code>shallowMount()</code> function.</p>
  <p>In the official doc : <a href="https://vue-test-utils.vuejs.org/guides/using-with-vuex.html" rel="nofollow noreferrer">https://vue-test-utils.vuejs.org/guides/using-with-vuex.html</a>, So I implement this sample</p>
  <pre><code>import { createLocalVue, shallowMount } from &quot;@vue/test-utils&quot;;
  import ProjectItem from &quot;@/components/ProjectItem.vue&quot;;
  import { state } from &quot;@/data/fakeStore/projects&quot;;
  import Vuex from &quot;vuex&quot;;
  
  describe(&quot;ProjectItem.vue&quot;, () =&gt; {
    const localVue = createLocalVue();
    localVue.use(Vuex);
  
    const fakeStore = new Vuex.Store({
      state: state,
      getters: {
        projects: jest.fn(),
        skills: jest.fn(),
        skillsFromOneProject: jest.fn()
      }
    });
  
    const wrapper = shallowMount(ProjectItem, {
      props: {
        index: 0
      },
      fakeStore,
      localVue
    });
  
    it(&quot;check initialization data&quot;, () =&gt; {
      expect(wrapper.vm.projects).toEqual(state.projects);
      expect(wrapper.vm.skills).toEqual(state.skills);
      expect(wrapper.vm.index).toEqual(0);
    });
  });
  </code></pre>
  <p>But I can't use <code>createLocalVue</code> because I got</p>
  <blockquote>
  <p>Module '&quot;@vue/test-utils&quot;' has no exported member 'createLocalVue'.</p>
  </blockquote>
  <p>Moreover at the line <code>shallowMount(ProjectItem,</code></p>
  <p>I got the following error</p>
  <blockquote>
  <p>No overload matches this call.
  The last overload gave the following error.
  Argument of type 'DefineComponent&lt;{}, {}, any, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin, ... 4 more ..., {}&gt;' is not assignable to parameter of type 'ComponentOptionsWithObjectProps&lt;Readonly&lt;ComponentPropsOptions&gt;, {}, any, ComputedOptions, MethodOptions, ComponentOptionsMixin, ... 4 more ..., { ...; } | {}&gt;'.
  Type 'DefineComponent&lt;{}, {}, any, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin, ... 4 more ..., {}&gt;' is not assignable to type 'ComponentOptionsBase&lt;Readonly&lt;(readonly unknown[] &amp; { [x: number]: string; } &amp; { [iterator]?: IterableIterator | undefined; length?: number | undefined; concat?: string[] | undefined; join?: string | undefined; ... 19 more ...; toLocaleString?: string | undefined; }) | ({ ...; } &amp; ... 1 more ... &amp; { ...; })&gt;...'.
  Types of property 'setup' are incompatible.
  Type '((this: void, props: Readonly&lt;LooseRequired&lt;Readonly&lt;{} &amp; {} &amp; {}&gt;&gt;&gt;, ctx: SetupContext&lt;{}&gt;) =&gt; void | {} | RenderFunction | Promise&lt;...&gt;) | undefined' is not assignable to type '((this: void, props: Readonly&lt;LooseRequired&lt;(Readonly&lt;(readonly unknown[] &amp; { [x: number]: string; } &amp; { [iterator]?: IterableIterator | undefined; length?: number | undefined; concat?: string[] | undefined; ... 20 more ...; toLocaleString?: string | undefined; }) | ({ ...; } &amp; ... 1 more ... &amp; { ...; })&gt; &amp; ...'.
  Type '(this: void, props: Readonly&lt;LooseRequired&lt;Readonly&lt;{} &amp; {} &amp; {}&gt;&gt;&gt;, ctx: SetupContext&lt;{}&gt;) =&gt; void | {} | RenderFunction | Promise&lt;...&gt;' is not assignable to type '(this: void, props: Readonly&lt;LooseRequired&lt;(Readonly&lt;(readonly unknown[] &amp; { [x: number]: string; } &amp; { [iterator]?: IterableIterator | undefined; length?: number | undefined; concat?: string[] | undefined; ... 20 more ...; toLocaleString?: string | undefined; }) | ({ ...; } &amp; ... 1 more ... &amp; { ...; })&gt; &amp; {...'.
  Types of parameters 'ctx' and 'ctx' are incompatible.
  Type 'SetupContext&lt;string[]&gt;' is not assignable to type 'SetupContext&lt;{}&gt;'.
  Type '{}' is missing the following properties from type 'string[]': length, pop, push, concat, and 28 more.ts(2769)
  mount.d.ts(22, 25): The last overload is declared here.</p>
  </blockquote>
  <p>So I decided to try another thing, thank's to <a href="https://vue-test-utils.vuejs.org/api/options.html#context" rel="nofollow noreferrer">https://vue-test-utils.vuejs.org/api/options.html#context</a> I saw <code>mocks</code> option, so I replace wrapper by the following code</p>
  <pre><code>const wrapper = shallowMount(ProjectItem, {
      props: {
        index: 0
      },
      mocks: {
        $store: fakeStore
      }
  });
  </code></pre>
  <p>I still have the error <code>No overload matches this call ...</code> as before.</p>
  <p>package.json</p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;axios&quot;: &quot;^0.21.4&quot;,
      &quot;core-js&quot;: &quot;^3.6.5&quot;,
      &quot;pixi.js&quot;: &quot;^6.1.3&quot;,
      &quot;v-smooth-scroll&quot;: &quot;^2.0.0-beta.1&quot;,
      &quot;vue&quot;: &quot;^3.0.0&quot;,
      &quot;vue-class-component&quot;: &quot;^8.0.0-0&quot;,
      &quot;vue-router&quot;: &quot;^4.0.0-0&quot;,
      &quot;vuex&quot;: &quot;^4.0.0-0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@types/jest&quot;: &quot;^24.0.19&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^4.18.0&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;^4.18.0&quot;,
      &quot;@vue/cli-plugin-babel&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-eslint&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-router&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-typescript&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-unit-jest&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-vuex&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-service&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/compiler-sfc&quot;: &quot;^3.0.0&quot;,
      &quot;@vue/eslint-config-airbnb&quot;: &quot;^5.0.2&quot;,
      &quot;@vue/eslint-config-typescript&quot;: &quot;^7.0.0&quot;,
      &quot;@vue/test-utils&quot;: &quot;^2.0.0-0&quot;,
      &quot;eslint&quot;: &quot;^6.7.2&quot;,
      &quot;eslint-plugin-import&quot;: &quot;^2.20.2&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;^7.0.0&quot;,
      &quot;node-sass&quot;: &quot;^4.12.0&quot;,
      &quot;sass-loader&quot;: &quot;^8.0.2&quot;,
      &quot;typescript&quot;: &quot;~4.1.5&quot;,
      &quot;vue-jest&quot;: &quot;^5.0.0-0&quot;
    }
  </code></pre>
  <p>Can you show me unit test sample that add store to <code>shallowMount()</code> ?</p>
  <p><strong>UPDATE</strong></p>
  <p>Store code used in the component :</p>
  <pre><code>import { Project } from &quot;@/domain/store/Project&quot;;
  import { ProjectsGetters } from &quot;@/store/projects/getters&quot;;
  import { Options, Vue } from &quot;vue-class-component&quot;;
  import { useStore } from &quot;vuex&quot;;
  
  @Options({
    props: {
      index: String
    }
  })
  export default class ProjectItem extends Vue {
    store = useStore();
    index!: string;
    projects: Array&lt;Project&gt; = this.store.getters[ProjectsGetters.projects];
    skills: string = this.store.getters[ProjectsGetters.skillsFromOneProject](
      this.index
    );
  
    projectOver(index: number) {
      this.projects[index].classname = &quot;line-right&quot;;
    }
  
    projectLeave(index: number) {
      this.projects[index].classname = &quot;line-left&quot;;
    }
  }
  </code></pre>