反应笑话快照测试 - 更改目录结构答案

【问题标题】：react jest snapshot testing - change directory structure反应笑话快照测试 - 更改目录结构
【发布时间】：2020-08-08 00:20:03
【问题描述】：

我现在的结构是这样的

- Button
  - Button.tsx
  - Button.test.tsx

当我添加快照测试时，默认情况下它会创建一个像这样的 __snapshot__ 目录

- Button
  - __snapshots__
    - Button.test.tsx.snap
  - Button.tsx
  - Button.test.tsx

我希望将快照文件放在其他按钮文件旁边，像这样

- Button        
  - Button.tsx
  - Button.test.tsx
  - Button.test.tsx.snap

我已经阅读了一个新的 jest 配置 snapshotResolver ，但我无法让它与我的 react 应用程序（使用 CRA 创建）一起工作。

如果我尝试将它添加到 package.json 文件中，react 告诉我它只支持一些玩笑选项，snapshotResolver 不是其中之一。

我尝试了以下在线示例，但无法正常工作

我在项目的根目录中创建了一个 jest.config.js，其中包含

module.exports = {
    snapshotResolver: './snapshotResolver.js',
};

并且还在项目根目录创建了 snapshotResolver.js（我相信这是取自 github 问题）

// https://jestjs.io/docs/en/configuration.html#snapshotresolver-string
module.exports = {
    testPathForConsistencyCheck: 'some/example.test.js',

    resolveSnapshotPath: (testPath, snapshotExtension) =>
        testPath.replace(/\.test\.([tj]sx?)/, `${snapshotExtension}.$1`),
    resolveTestPath: (snapshotFilePath, snapshotExtension) =>
        snapshotFilePath.replace(snapshotExtension, '.test'),
};

2 件事。首先，我是否正确设置了 jest 配置和解析器？其次，因为我使用的是 CRA，它是否会忽略 jest.config 并使用它具有的任何默认值？

编辑

我找到了这个从 2019 年 8 月开始开放的 PR，https://github.com/facebook/create-react-app/issues/6532

【问题讨论】：

标签： reactjs jestjs create-react-app

【解决方案1】：

正如您已经发现的那样，create-react-app 不支持 snapshotResolver 配置选项。

因此，除非您退出项目，否则您将无法调整快照的存储位置。

【讨论】：