reactjs - 如何在 React 项目中集中快照文件夹？

Question

我在一个必须构建 React UI 的项目中。由于这是一个小项目，而且我一个人在做，所以我会尝试使用 TypeScript 和 TDD 方法来开发它。

我学习了实践，安装了 Jest & Enzyme。
我的理解是，只要有 snpashot 测试，就会有一个 __snapshot__ 目录。有没有办法将所有快照集中在特定路径中？

问题背后的想法是保持项目文件夹尽可能干净和可读，而不是在每个组件文件夹中添加 __snapshot__ 文件夹。

获得方便行为的一种方法是将所有测试存储在 src/tests 文件夹中，以获得 src/tests/__snapshots__ 文件夹，但我宁愿将组件测试保存在 components 文件夹中。

Answer 1

您需要创建 custom snapshot resolver在你的 jest.config 文件中。 Link 有一个代码示例，可以满足您的需求。

module.exports = {

  // resolves from test to snapshot path
  resolveSnapshotPath: (testPath, snapshotExtension) =>
  testPath.replace('__tests__', '__snapshots__') + snapshotExtension,

  // resolves from snapshot to test path
  resolveTestPath: (snapshotFilePath, snapshotExtension) =>  
    snapshotFilePath
    .replace('__snapshots__', '__tests__')
    .slice(0, -snapshotExtension.length),

  // Example test path, used for preflight consistency check of the implementation above
  testPathForConsistencyCheck: 'some/__tests__/example.test.js',
};