我正试图在Vue.js应用程序上使用Vitest运行测试，该应用程序使用注册为插件的Element Plus。
如果我在包含Element Plus组件的组件上使用mount，我会得到以下错误：
TypeError: Unknown file extension ".scss" for /home/projects/vitejs-vite-zcdxhn/node_modules/element-plus/theme-chalk/src/button.scss
该问题可以在此StackBlitz上复制。
我的vite.config.js文件如下所示：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import ElementPlus from 'unplugin-element-plus/vite';
export default defineConfig({
plugins: [vue(), ElementPlus({ useSource: true })],
});
我的HelloWorld.vue组件如下所示：
<script setup>
import { ElButton } from 'element-plus';
</script>
<template>
<el-button type="primary">Hello</el-button>
</template>
我的HelloWorld.spec.js看起来像这样：
import { test, expect } from 'vitest';
import HelloWorld from '../HelloWorld.vue';
import { mount } from '@vue/test-utils';
test('hello world test', async () => {
const wrapper = mount(HelloWorld);
expect(wrapper.text()).toContain('Hello');
});
这似乎与CCD_；unplugin"；在vite.config.js中的plugins中，因为当我删除它时，问题就消失了。
我已经查看了各种工具(Element Plus、Vite、Vitest)的文档，但我还没能找到如何实现这一点。
是否有需要应用的自定义测试配置？
在我的情况下，它通过在vitest-config 中添加deps.inline: ['element-plus']来修复
参考文献：
未知的文件扩展名"。css"当与unplugin vue组件一起使用时·问题#1388·vitest-dev/vitest·GitHub
配置Vitest|Vitest
vitest: '^0.34.3'
Vitest"deps.inline"；已弃用。如果您直接依赖vite节点，请使用"server.deps.inline"；相反否则，考虑使用"；deps.optimizer.web.include；
deps: {
optimizer: {
web: {
include: ['element-plus']
}
}
}
它对我有效