我尝试在 Nuxt 3 上运行组件单元测试,但收到一条错误消息,告诉我找不到该组件..
失败测试/组件/button.test.ts [测试/组件/button.test.ts] 错误:无法解析从“components\Button\Button.vue”导入“@/components/Texts/Button/ButtonText.vue”。文件存在吗?
button.spec.ts
import {test, expect} from 'vitest';
import {mount} from '@vue/test-utils';
import Button from "../../components/Button/Button.vue";
test('Button Component', async () => {
const button = mount(Button, {
props: {
text: 'My Test Button'
}
});
expect(button.text()).toEqual('My Test Button');
});
Button.vue
<template>
<div class="Button">
<slot name="left" />
<ButtonText :text="text" />
<slot name="right" />
</div>
</template>
<script lang="ts">
export default {
name: 'Button',
components: {ButtonText},
props: {
// Text to display in the button
text: {
type: String as () => string,
default: 'Button',
required: true,
},
}
}
</script>
有什么想法吗?
假设
@/components/Texts/Button/ButtonText.vue
确实存在,问题的解决方案可能是向您的 ./vitest.config.ts
添加别名,如下所示:
// vitest.config.ts
import { defineConfig } from 'vite'
import { aliases } from './aliases'
export default defineConfig({
resolve: { aliases },
// ... further settings
})
// aliases.ts
import { resolve } from 'path';
const r = (p: string) => resolve(__dirname, p);
export const alias: Record<string, string> = {
'~~': r('.'),
'~~/': r('./'),
'@@': r('.'),
'@@/': r('./'),
// ... other aliases
};
对我有用的解决方案:
defineProject({
... more code here
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
"#imports": path.resolve(__dirname, "./"),
"~": path.resolve(__dirname, "./"),
},
},
}),
Vitest 终于不再对 nuxt 导入咆哮了。