如何测试带有Pinia store的Vue 3组件

Question

我开始学习测试，但在这方面还没有取得多大的成功。我正试图为组件编写模拟测试，但我得到一个错误

Test suite failed to run
Cannot find module '@/stores/store' from 'src/components/reusable/Header.vue'
Require stack:
src/components/reusable/Header.vue
src/components/reusable/Header.test.ts
42 | <script lang="ts" setup>
43 | import { reactive, computed, onMounted } from "vue";
> 44 | import { useStore } from "@/stores/store";
| ^
45 | import Button from "@/components/reusable/Button.vue";
46 | import LocaleSwitcher from "@/components/reusable/LocaleSwitcher.vue";
47 | import Moon from "@/assets/images/moon.svg";
at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:487:11)
at Object.<anonymous> (src/components/reusable/Header.vue:44:1)
at Object.<anonymous> (src/components/reusable/Header.test.ts:2:1)

这是Vue 3组件

<template>
<div class="menu">
<Button
v-show="width < 800 && store.hasGroup && !state.showMenu"
class="custom-button_type_elevated burger-button"
@click="showMenu"
>
<div class="burger-icon"></div>
</Button>
<nav
v-if="store.hasGroup"
class="navbar"
:class="state.showMenu ? '' : 'navbar_hidden'"
v-click-outside="closeMenu"
>
<Button
class="custom-button_type_elevated menu-button"
:button-text="$t('button.info')"
:class="store.currentTab === 'information' ? 'custom-button_active' : ''"
@click="goToPage('information')"
/>
<Button
class="custom-button_type_elevated menu-button"
:button-text="$t('button.subs')"
:class="store.currentTab === 'subscribers' ? 'custom-button_active' : ''"
@click="goToPage('subscribers')"
/>
<Button
class="custom-button_type_elevated menu-button"
:button-text="$t('button.reg')"
:class="store.currentTab === '/' ? 'custom-button_active' : ''"
@click="goToPage('/')"
/>
</nav>
<LocaleSwitcher class="locale-switcher" />
<Button class="theme-button" @click="setTheme(store.theme)">
<img class="theme-icon" :src="store.theme === 'dark' ? Moon : Sun" alt="theme icon" />
</Button>
</div>
</template>
<script lang="ts" setup>
import { reactive, computed, onMounted } from "vue";
import { useStore } from "@/stores/store";
import Button from "@/components/reusable/Button.vue";
import LocaleSwitcher from "@/components/reusable/LocaleSwitcher.vue";
import Moon from "@/assets/images/moon.svg";
import Sun from "@/assets/images/sun.svg";
import { getWidth } from "@/composables/resizeController";
const store = useStore();
const width = getWidth();
const state = reactive({
showMenu: false,
wrapperClass: computed(() => (store.currentTab === "/" ? "" : "wrapper_dark")),
});
const goToPage = (page: string) => {
store.currentTab = page;
state.showMenu = false;
}
onMounted(() => {
setTheme(store.theme);
});
const setTheme = (theme: string) => {
document.documentElement.className = theme;
store.theme = theme === "dark" ? "light" : "dark";
};
const showMenu = () => {
window.setTimeout(() => {
state.showMenu = true;
}, 0);
}
const closeMenu = () => {
if (state.showMenu) state.showMenu = false;
}
</script>

这是我的测试

import Header from "./Header.vue";
import { mount } from "@vue/test-utils";
import { createTestingPinia } from "@pinia/testing";
import { useStore } from "@/stores/store";
describe("Counter Store", () => {
const store = useStore();
const wrapper = mount(Header, {
global: {
plugins: [createTestingPinia()],
},
});
store.theme = "dark";
expect(store.theme).toBe("dark");
store.updateGroup();
expect(store.updateGroup).toHaveBeenCalledTimes(1);
});

我将感激任何帮助。我自己阅读了Pinia的测试文档，Vue Test Utils的文档，但我仍然不明白什么通常取决于内部发生了什么。从网上尝试了许多不同的代码片段，但没有一个能帮助解决这个问题。我对测试库或特定的测试方法没有任何偏好，所以我可以改变我的方法，只是不知道该走哪条路。

Answer 1

我可以看到你在你的项目中是TS，在我的测试和pinia中有完全相同的错误。

确保更改所有pinia.js相关文件扩展名到.ts

希望这能帮助到一些人。