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

标签 reactjs typescript jestjs snapshot

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

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

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

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

最佳答案

您需要创建 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',
};

关于reactjs - 如何在 React 项目中集中快照文件夹?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58817826/

相关文章:

reactjs - 在 React JS 中粘贴到多个输入字段

javascript - 如何通过异步函数设置 react 父组件状态,然后将此状态作为 Prop 传递给子组件?

reactjs - 为子文件夹声明模块

angular - Ionic 3文件夹结构

reactjs - SecurityError : replaceState cannot update history to a URL which differs in components other than in path, 查询或片段

jestjs - TypeError : (0 , _reactTestRenderer.act) 不是函数

javascript - React 路由器在刷新后渲染组件

reactjs - 如何在 react 图表的两个轴上显示文本?

typescript - 更新到 27 后,Angular jest 无法理解导入路径

javascript - 用 Jest 模拟 require 语句