How to configure jest snapshot locations

Question

I'd like for my jest snapshots to be created as a sibling to my test file

I current have my snapshots being put in the default __snapshots__ folder.

Current:

What I would like to achieve:

I found this post on github: https://github.com/facebook/jest/issues/1650

In the thread someone says the following should work but I haven't had any luck (even with changing the regex and other changes):

module.exports = {
  testPathForConsistencyCheck: 'some/example.test.js',

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

  resolveTestPath: (snapshotFilePath, snapshotExtension) =>
    snapshotFilePath.replace(snapshotExtension, '.test'),
}

Answer 1

In package.json (or if you use jest.config.js) you need to add the path for the snapshotResolver file:

"jest": {
  "snapshotResolver": "./snapshotResolver.js"
}

snapshotResolver.js is a file with code that you found in a Github issue.

In my case this file was located at the root of the project (near node_modules folder)

Answer 2

These solutions are more complicated that is needed for what you are trying to do.

As per pointed out in https://github.com/facebook/jest/issues/1650

Solution

Create a file: I used - 'jest/snapshotResolver.js'

module.exports = {
  resolveSnapshotPath: (testPath, snapshotExtension) =>
     testPath + snapshotExtension,
  resolveTestPath: (snapshotFilePath, snapshotExtension) =>
    snapshotFilePath.replace(snapshotExtension, ''),
  testPathForConsistencyCheck: 'some.test.js',
};

in your jest config set that file to the resolver

snapshotResolver: './jest/snapshotResolve.js',

or if your jest config in package.json:

"snapshotResolver": "./jest/snapshotResolve.js",

Explanation

In short these two functions mirror each other, one takes the test file path and returns the snapshot path, the other takes the snapshot path and returns the test file path. The third is a file path example for validation.

Clearer code To help clarify what is going on

One thing to keep in mind is that the path is the full path not the relative path.

/**
 * 
 * @param testPath Path of the test file being test3ed
 * @param snapshotExtension The extension for snapshots (.snap usually)
 */
const resolveSnapshotPath = (testPath, snapshotExtension) => {
    const snapshotFilePath = testPath + snapshotExtension; //(i.e. some.test.js + '.snap')
    return snapshotFilePath;
}

/**
 * 
 * @param snapshotFilePath The filename of the snapshot (i.e. some.test.js.snap) 
 * @param snapshotExtension The extension for snapshots (.snap)
 */
const resolveTestPath = (snapshotFilePath, snapshotExtension) => {
    const testPath = snapshotFilePath.replace(snapshotExtension, '').replace('__snapshots__/', ''); //Remove the .snap
    return testPath;
}

/* Used to validate resolveTestPath(resolveSnapshotPath( {this} )) */
const testPathForConsistencyCheck = 'some.test.js'; 

module.exports = {
    resolveSnapshotPath, resolveTestPath, testPathForConsistencyCheck
};