Vue3 Jest module not found error while using store

Question

I'm using Vue3 with typescript and trying to write unit test with Jest. Like in the documentation, to use $store, I've declared a module in shims-vue.d.ts file like this:

/* eslint-disable */

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
}

import { Store } from '@/store/index'

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $store: Store
    }
}

And it works perfectly, I can use $store in components properly. But after I declared that module in shims-vue.d.ts, I am no longer able to import my components in test files. My test file:

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

import { createStore } from 'vuex'

const store = createStore({
    state() {
        return {
            count: 0
        }
    },
    mutations: {
        increment(state: any) {
            state.count += 1
        }
    }
})

describe('Increment.vue', () => {
    test('something', async () => {
        const wrapper = mount(Increment, {
            global: {
                plugins: [store]
            }
        })

        await wrapper.get('[data-test="increment"]').trigger('click')

        expect(wrapper.get('[data-test="count"]').text()).toBe(1)
    })
})

I'm getting an error: TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option): tests/unit/components/increment.spec.ts:2:23 - error TS2307: Cannot find module '@/components/Increment.vue' or its corresponding type declarations.. But I'm sure that the path and the names are correct. Can anyone help me about this? Thank you

Increment.vue

<template>
    <div>
        <div data-test="count">
            {{ count }}
        </div>
        <button data-test="increment" @click="increment()">
            Increment
        </button>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { mapState } from 'vuex'

export default defineComponent({
    computed: {
        ...mapState([
            'count'
        ])
    },
    methods: {
        increment() {
            this.$store.commit('increment')
        }
    }
})
</script>

<style scoped>
    
</style>

Answer 1

I've found the problem here. I wanted to use $store and declared the module in shims-vue.d.ts file. But that module needed to be created in an additional file name vuex.d.ts. After that problem solved.