内容来源于 Stack Overflow,遵循 CC BY-SA 4.0 许可协议进行翻译与使用。IT领域专用引擎提供翻译支持
腾讯云小微IT领域专用引擎提供翻译支持
我开始用Nuxt 3和Vuetify 3创建一个应用程序,这个web应用程序运行得很好。
现在,当我得到一个类似于 Can't find stylesheet to import 的错误时,我开始使用vitest编写页面的单元测试。(组件的单元测试和状态管理工作正常)
Can't find stylesheet to import
我们使用Nuxt 3,Vuetify 3,类型记录,pinia和最具活力的应用程序开发。
vitest.config.ts
import {defineConfig} from 'vite'; import Vue from '@vitejs/plugin-vue'; import Vuetify from '@vuetify/vite-plugin'; export default defineConfig({ plugins: [Vue(), Vuetify({styles: 'sass'})], resolve: { alias: { '@@': __dirname, test: { globals: true, environment: 'jsdom', deps: { inline: [/@nuxt\/test-utils-edge/], });
nuxt.config.ts
import {defineNuxtConfig} from 'nuxt'; // https://v3.nuxtjs.org/api/configuration/nuxt.config export default defineNuxtConfig({ typescript: { typeCheck: 'build', strict: true, css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'], build: { transpile: ['vuetify'], vite: { define: { 'process.env.DEBUG': false, buildModules: ['@pinia/nuxt'], });
测试/页/导出/index.test.ts(测试)
import {describe, test, expect} from 'vitest'; import {setup, $fetch} from '@nuxt/test-utils-edge'; describe('exportPage', async () => { await setup({ server: true, test('Check export title', async () => { const html = await $fetch('/export'); expect(html).toContain('Export data'); });
依赖关系
"devDependencies": { "@nuxt/test-utils-edge": "3.0.0-rc.4-27588443.cf25525", "@nuxtjs/composition-api": "0.32.0", "@nuxtjs/eslint-config-typescript": "^10.0.0", "@pinia/nuxt": "0.1.9", "@typescript-eslint/eslint-plugin": "^5.27.1", "@typescript-eslint/parser": "^5.27.1", "@vue/eslint-config-standard": "^7.0.0", "@vue/test-utils": "2.0.0", "@vuetify/vite-plugin": "^1.0.0-alpha.11", "eslint": "^8.17.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-nuxt": "^3.2.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-vue": "^9.1.0", "jsdom": "^20.0.0", "mdi": "2.2.43", "nuxt": "3.0.0-rc.4", "pinia": "2.0.14",