reactjs - react Jest 快照测试 - 更改目录结构

Question

我目前的结构是这样的

- 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 会告诉我它只支持一些 jest 选项，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

Answer 1

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

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