Vue3 Jest模块在使用存储时未发现错误

Question

我将Vue3与typescript结合使用，并尝试使用Jest编写单元测试。就像在文档中一样，为了使用$store，我在shims-vue.d.ts文件中声明了一个模块，如下所示：

/* 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
}
}

它工作得很好，我可以正确地在组件中使用$store。但是，在我在shims-vue.d.ts中声明了该模块之后，我就无法再在测试文件中导入我的组件了。我的测试文件：

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)
})
})

我收到一个错误：CCD_ 1。但我确信路径和名称是正确的。有人能帮我吗？谢谢

增量.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

我在这里发现了问题。我想使用$store，并在shims-vue.d.ts文件中声明了该模块。但这个模块需要在一个额外的文件名vuex.d.ts中创建。在这个问题解决后。