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

Question

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

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

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

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

Answer 1

您需要在 jest.config 文件中创建 custom snapshot resolver。 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',
};

Answer 2

终于明白了！

我试图将 resolveSnapshotPath 和其他 2 个属性直接放在 jest 配置文件中。我误解了我必须做的事情：将这些文件放在一个新模块中并通过将它的路径绑定到 snapshotResolver jest 配置文件属性.[=10 来调用这个文件=]

我总是不太清楚每个解析器的用途是什么属性，但在它工作时，我应该通过一些测试来了解它。

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

How to centralize snapshots folder in a React project?

snapshot

typescript

reactjs

jestjs