Configurable snapshots directory for colocated tests

[holic]

The React community seems to be moving towards colocating tests with components. I appreciate the changes to the default testRegex that looks for any .test.js file.

However, using this colocation method means a bunch of scattered __snapshots__ directories throughout the codebase. Since snapshots seem to be more for machine readability than human readability, I would tend to throw them all in a single top-level directory (like you might have for build/dist files). What are your thoughts on making the snapshots directory configurable?

[ljharb]

@aminroosta i'd love to see that PR; it'd be great to get it open and in a good state where we could advocate for jest to merge it!

[kkutsner]

Let's say I have service A and service B that expose identical REST API. I want tests for both services and I want to use snapshots feature to store some filtered JSON response returned by service A and service B. Let's say I have written tests once that may hit one service at time (A or B). I can run them against service A, get snapshots, then I can run them against service B and get new snapshots. It turns out that service A and service B may produce different snapshots for some known reasons. So it sounds reasonable to specify different snapshots locations depending on what service is tested. Because I can't do it through Jest config, I have to maintain copy of the same test stored in the different folder, but I really want to have just one test and two different snapshots.

I hope this sounds like a real use case to get it supported. I can see it is a rare case, but I think it is related to other cases that people brought here. Thanks!

[asn007]

Looks like there's no progress on this. I would love to try working on it, since I need this feature badly

[astrotim]

@joshduck they don't wanna see ↑

[sidferreira]

@cpojer Disagree, for React Native projects, which we can have more than one platform, is really useful. Check the rendering of the component on iOS, Android, and whatever else show up. Just a way to override the 'SNAP' extension would help a lot already.

[RyanCavanaugh]

This is really unfortunate if you're using a setup where you have source files (e.g. TypeScript) which are checked in and output files (e.g. the corresponding JS) which aren't checked in. The snapshot files end up in a normally-.gitignore'd directory.

[eluchsinger]

So much clutter without this function...

[kkutsner]

Snapshots are driving my project. Without this function I’m forced to build my own solution, which eliminates the need of using Jest... Bummer.

[hiredgun]

I don't like the idea of having __snapshots__ directory colocated with every test too and I would rather prefer to have an option to place all of them in a single directory e.g. on the top level. To me, it's just a visual thing and IMHO hundreds of __snapshots__ dirs scattered on a files tree looks really messy. Fortunately, there's a simple workaround for this in VS Code - just exclude__snapshots__ directory from the files explorer in your settings like this:

    "files.exclude": {
        "**/__snapshots__": true
    }

This way__snapshots__ directory will be hidden in the files explorer in your VS Code. I guess sth similar is also possible in Jetbrains' IDEs.

[viddo]

I spent a few hours looking into this, put up a PR #6143 based on a previous suggestion for anyone that's interested.

[akuji1993]

Seems like you are moving foward with this @viddo. Thanks for your work on this, I'd really like to see this get merged.

[holic]

Thanks @viddo! 😍

[SimenB]

This has landed and will be available in Jest 24. It's currently available by installing jest@beta

[rattrayalex-stripe]

In case others find it helpful, here is the contents of my snapshotResolver.js implementing @assertchris 's suggestion:

// 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'),
}

This results in

component.ts
component.test.ts
component.snap.ts

[turtlebe]

If you want to place test files (*.test.js) next to the relevant components but place snapshots in a single directory (__snapshots__), you can do like this.

// jest.config.js module.exports = { ... ... snapshotResolver: './__snapshots__/snapshotResolver.js', ... ... }

// snapshotResolver.js

module.exports = { resolveSnapshotPath: (testPath, snapshotExtension) => testPath .replace(/.test.([tj]sx?)/, '.test' + snapshotExtension) .replace(/src([/\\]components)/, '__snapshots__'),

resolveTestPath: (snapshotFilePath, snapshotExtension) => snapshotFilePath.replace(snapshotExtension, '.js').replace('__snapshots__', 'src/components'),

testPathForConsistencyCheck: 'src/components/some.test.js', }

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.