Vite + Cypress：如何防止重新加载（由于优化的依赖关系）导致测试失败？

Question

当我运行 Cypress 组件测试时，有时我会遇到以下情况：

\n

17:34:59 [vite] \xe2\x9c\xa8 new dependencies optimized: vuetify/components, vuetify/lib/components/VAppBar/index.mjs, vuetify/lib/components/VDivider/index.mjs, vuetify/lib/components/VToolbar/index.mjs, @vueuse/core\n17:34:59 [vite] \xe2\x9c\xa8 optimized dependencies changed. reloading\n\n1) An uncaught error was detected outside of a test\n

\n

测试失败...如果我第二次重新启动测试，一切正常：所有测试都通过。\n我可以采取什么措施来防止这种情况发生？

\n

我的cypress.config.ts很简单：

\n

export default defineConfig({\n  video: false,\n  env: {\n    codeCoverage: {\n      exclude: ['cypress/**/*.*', 'src/**/*.cy.ts'],\n    },\n  },\n  component: {\n    devServer: {\n      framework: 'vue',\n      bundler: 'vite',\n    },\n    setupNodeEvents(on, config) {\n      registerCodeCoverageTasks(on, config)\n\n      return config\n    },\n  },\n})\n

\n

我的也是如此vite.config.ts：

\n

export default defineConfig({\n  plugins: [\n    vue(), // SFC\n    vuetify({\n      autoImport: true,\n    }),\n    istanbul({\n      cypress: true,\n      requireEnv: false,\n    }),\n  ],\n resolve: {\n    alias: {\n      '@': resolve(__dirname, 'src'),\n    },\n    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],\n  },\n }\n})\n

\n

Answer 1

我遇到了类似的问题，我的赛普拉斯测试在 Firefox 上失败，仅出现“TypeError：加载动态导入模块时出错”。

看看你的，vite.config.ts我发现你正在使用vite-plugin-vuetify.

来自Vite 文档：

一个典型的用例optimizeDeps.include或 的optimizeDeps.exclude是当您的导入无法在源代码中直接发现时。例如，导入可能是由于插件转换而创建的。这意味着 Vite 将无法在初始扫描时发现导入 - 它只能在浏览器请求文件并进行转换后才能发现它。这将导致服务器在服务器启动后立即重新捆绑。

两者include和exclude可以用来处理这个问题。如果依赖关系很大（有很多内部模块）或者是 CommonJS，那么你应该包含它；如果依赖关系很小并且已经是有效的ESM，则可以将其排除并让浏览器直接加载它。

所以解决办法是

// vite.config.ts
export default defineConfig({
  ...,
  optimizeDeps: {
    exclude: ['vuetify'],
    // or include: ['vuetify'], ?
  },

听起来包含而不是排除更有意义，因为 Vuetify 可能被认为很大，但我发现只有排除对我有用。

您可能还需要对 执行相同的操作@vueuse/core。

PS 如果您使用单文件组件，您可能还想查看包含.vue文件，optimizeDeps.entries以便 Vite 知道它需要爬行它们以查找依赖项。就像是

  optimizeDeps: {
    entries: ['./src/**/*.{vue,js,jsx,ts,tsx}'],