Vite 6.3.0+ 版本中模块导出覆盖问题的分析与解决方案

问题背景

在 Vite 6.3.0 版本升级后，许多开发者发现他们的测试用例开始失败。这个问题特别出现在使用了 React Testing Library 自定义渲染函数的场景中。按照 React Testing Library 的官方推荐做法，开发者通常会先导出所有内容，然后再覆盖特定的导出项（如 render 函数）。

问题现象

在 Vite 6.2.6 及以下版本中，以下代码能够正常工作：

// 先导出所有内容
export * from '@testing-library/react'

// 然后覆盖render方法
export {customRender as render}

但在 Vite 6.3.0 及以上版本中，这种导出覆盖的方式不再有效。Vite 似乎记住了第一次遇到的 render 函数，而忽略了后续的覆盖导出。

技术分析

这个问题源于 Vite 6.3.0 中对模块导出处理逻辑的变更。在之前的版本中，模块导出系统会按照代码顺序处理导出语句，允许后续导出覆盖同名导出。但在新版本中，导出处理变得更加严格，导致覆盖行为失效。

解决方案

临时解决方案

开发者可以采用显式导出方式，避免使用通配符导出：

// 显式导出需要的内容
export {act, fireEvent, screen, waitFor, waitForElementToBeRemoved} from '@testing-library/react';

// 导出自定义render函数
export {customRender as render};

这种方式虽然需要手动维护导出列表，但能够确保导出覆盖的正确性。

永久解决方案

Vitest 团队已经在 3.1.2 版本中修复了这个问题。升级到最新版 Vitest 可以彻底解决此问题。

最佳实践建议

1. 对于关键导出项的覆盖，建议始终使用显式导出方式
2. 在升级构建工具版本时，特别注意测试相关的导出逻辑
3. 考虑为重要的导出覆盖编写专门的测试用例，确保覆盖行为按预期工作

总结

这个问题展示了构建工具版本升级可能带来的微妙兼容性问题。开发者需要了解模块导出机制的变化，并采取适当的应对策略。通过显式导出或升级测试工具版本，可以确保代码在最新版 Vite 中正常工作。