Currently, I am utilizing Vue3 alongside TypeScript and attempting to create unit tests using Jest. Following the documentation, I have defined a module in the shims-vue.d.ts file as shown below:
/* 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
}
}
This setup allows me to successfully utilize $store within components. However, once I added this module to shims-vue.d.ts, I encountered an issue where I could no longer import my components in test files. Here's an example of 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)
})
})
An error that I'm encountering states:
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.Below is the code for 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>