0

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>
Oğuz Öztınaz
  • 165
  • 9

1 Answers1

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.

Oğuz Öztınaz
  • 165
  • 9
  • Can you please link to the docs where you found that you need to add $store to a .d.ts file? I'm looking at and can't find it https://next.vuex.vuejs.org/guide/. Are you sure you are looking at the docs for Vue 3, not Vue 2? –  Feb 04 '22 at 13:07
  • 1
    You can also check https://stackoverflow.com/a/56792936 or try to use Vitest instead of Jest. You may also try to run `npm run build` to see if the same "Can't find module or type declarations" error appears. If it doesn't, then you know that it's purely a Jest issue (because regular TypeScript detects the types fine if it builds) –  Feb 04 '22 at 13:14
  • 1
    @walnut_salami [link](https://next.vuex.vuejs.org/guide/typescript-support.html) Hi, this is the doc that tells to declare that module. Thank you for your suggestion. I'm actually trying to learn Jest because in my company, Jest is being used for testing Vue projects, but I'm gonna take a look for Vitest also. – Oğuz Öztınaz Feb 05 '22 at 11:42