Stencil项目中__mocks__目录被错误复制的问题解析

在Stencil项目构建过程中，开发者发现了一个关于Jest mock文件处理的特殊问题。当项目中使用__mocks__目录来存放Jest测试所需的mock文件时，这些目录会被错误地复制到最终的构建输出目录中，导致Jest测试时出现重复mock文件的警告。

问题现象

在Stencil 4.18.0版本中，当开发者在src目录下创建__mocks__子目录并放置mock文件时，这些文件会被原样复制到dist输出目录中。这会导致Jest在运行测试时检测到重复的mock文件定义，并抛出如下警告：

jest-haste-map: duplicate manual mock found: functions
  The following files share their name; please delete one of them:
    * <rootDir>\src\global\__mocks__\functions.tsx
    * <rootDir>\dist\collection\global\__mocks__\functions.js

问题本质

这个问题源于Stencil的构建机制。Stencil默认会将src目录下的所有内容复制到输出目录中，包括测试专用的__mocks__目录。这种行为虽然保证了源代码的完整性，但对于测试专用的mock文件来说却是不必要的，甚至会产生副作用。

技术背景

在Jest测试框架中，__mocks__目录是一个特殊约定：

1. 用于存放模块的手动mock实现
2. Jest会自动识别和使用这些mock文件
3. 通常不应该被包含在生产构建中

Stencil作为一个现代Web组件编译器，其构建流程默认没有特殊处理这个Jest特有的目录结构。

解决方案

虽然Stencil团队将此标记为功能请求，但开发者可以采取以下临时解决方案：

1. 调整目录结构：将__mocks__目录移到src目录之外
2. 使用Jest配置：在jest.config.js中明确指定mock文件位置
3. 构建后脚本：添加一个构建后步骤删除dist中的__mocks__目录

最佳实践建议

对于Stencil项目中的测试文件管理，建议：

1. 将测试相关文件(包括mock)统一放在项目根目录下的__mocks__和__tests__目录中
2. 避免在组件目录内部放置测试文件
3. 考虑使用TypeScript的路径别名来简化mock引用

未来展望

Stencil团队已在4.21.0版本中修复了这个问题。这个修复体现了Stencil对开发者体验的持续改进，也展示了开源项目对社区反馈的积极响应。对于依赖旧版本的项目，理解这个问题本质有助于开发者找到合适的变通方案。