如何强制Jest将快照输出至根目录级__snapshots__文件夹？

当然可以实现这个需求！Jest提供了自定义快照解析器的配置项，能完全控制快照的生成路径。下面是具体的实现步骤：

1. 配置Jest使用自定义快照解析器 #

在项目根目录的jest.config.js（如果没有就新建一个）里，添加snapshotResolver配置项，指向我们要创建的解析器文件：

module.exports = {
  // 保留你原有的其他Jest配置
  snapshotResolver: './jest.snapshotResolver.js'
};

2. 编写自定义快照解析器 #

在项目根目录创建jest.snapshotResolver.js文件，写入以下代码：

const path = require('path');
const rootDir = process.cwd();

module.exports = {
  // 定义测试文件对应的快照存放路径
  resolveSnapshotPath: (testPath, snapshotExtension) => {
    // 获取测试文件相对于项目根目录的路径
    const relativeTestPath = path.relative(rootDir, testPath);
    // 将快照文件放到根目录__snapshots__下，保持原测试文件的路径结构
    return path.join(rootDir, '__snapshots__', relativeTestPath) + snapshotExtension;
  },

  // 定义快照文件对应的测试文件路径（Jest反向查找用）
  resolveTestPath: (snapshotFilePath, snapshotExtension) => {
    // 移除根目录__snapshots__的前缀，得到原测试文件的相对路径
    const relativeSnapshotPath = path.relative(path.join(rootDir, '__snapshots__'), snapshotFilePath);
    // 去掉快照扩展名，还原为测试文件路径
    return path.join(rootDir, relativeSnapshotPath).slice(0, -snapshotExtension.length);
  },

  // 用于Jest验证配置一致性的示例测试路径（选一个你的真实测试文件就行）
  testPathForConsistencyCheck: 'components/Paragraph/test.js'
};

3. 验证效果 #

配置完成后，重新运行Jest快照测试，你会看到根目录下生成__snapshots__文件夹，里面会按照组件的原目录结构存放快照文件，比如__snapshots__/components/Paragraph/test.js.snap，完全符合你想要的目录结构。

小提示 #

• 如果运行测试时根目录的__snapshots__文件夹没有自动生成，手动创建一个即可。
• 这种方式保留了测试文件的路径层级，不用担心不同组件的快照文件名冲突问题。

内容的提问来源于stack exchange，提问作者Ilja