Configurable snapshots directory for colocated tests

[frolic]

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?

[cpojer]

snapshots are colocated with tests and they are definitely not meant to be for machine readability. They are meant to be reviewed by humans, both the author of a test and the code reviewers.

[cpojer]

Jest also ensures that there are never any stale snapshots in the system. This means we both need a way to map from a snapshot to its associated test and back. This seems kinda hard to configure via string values in the JSON config :(

[frolic]

Thanks for the quick reply!

I understand that the snapshots are meant to be read and reviewed. It just seems a bit messy to have __snapshots__ littered throughout the codebase when I want to have tests colocated with components. This may also come from a pattern of grouping components by functionality, rather than having a components directory (e.g. user/Profile.js and layout/Nav.js).

In the meantime, I've just started dropping tests into __tests__ to get the __snapshots__ into a single place but this isn't my ideal.

I also understand this is a bit hard to configure. My thought was to define some top level directory for __snapshots__ and have the directory structure within it match the path to the component from that top level.

It might just be me that finds this messy. Curious to hear from others that colocate tests with components and have multiple directories of components.

[cpojer]

I don't really quite understand what you mean. The snapshots are colocated with tests and there is a 1:1 mapping between testfilename.js and __snapshots__/testfilename.js.snap?

[frolic]

Currently my directory looks a bit like this:

js/
  user/
    __snapshots__/
      Avatar.test.js.snap
      Profile.test.js.snap
    Avatar.js
    Avatar.test.js
    Profile.js
    Profile.test.js
  layout/
    __snapshots__/
      App.test.js.snap
      Nav.test.js.snap
    App.js
    App.test.js
    Nav.js
    Nav.test.js

The __snapshots__ in this way feels a little messy to me (but this may just be me).

As an alternative, my thought was a directory structure like this might be easier to understand/comb through:

js/
  __snapshots__/
    user/
      Avatar.test.js.snap
      Profile.test.js.snap
    layout/
      App.test.js.snap
      Nav.test.js.snap
  user/
    Avatar.js
    Avatar.test.js
    Profile.js
    Profile.test.js
  layout/
    App.js
    App.test.js
    Nav.js
    Nav.test.js

[cpojer]

but that is the opposite of colocating snapshot files with their tests, isn't it?

[frolic]

I'm proposing that the snapshots don't necessarily need to be colocated with tests. I find it more important that tests are colocated with components. Having all three colocated feels messy, mostly due to the several __snapshots__ directories that are created/scattered throughout the codebase (at least in the way I've chosen to organize my components).

[cpojer]

I'm not religiously opposed to this if you want to do all the work necessary to support this, find a way to make this maintainable and test it well.

[cpojer]

We can also help on our discord channel and happy to review code, of course :)

[frolic]

I think my main argument is that the snapshots are auto generated and aren't meant to be modified manually, nor really imported directly into the codebase. So it doesn't feel right to have them intermixed within the code which you are actively editing/maintaining/importing.

I'm not particularly married to this idea either :) Just wanted to propose it to see what others thought. If I'm not alone in this, I may take the time to mock up a PR and see what it might look like.

[cpojer]

I'm sure you find many people that share your opinion. Testing is like a religion to people and I'm happy to support all kinds of doing this as long as it integrates well with Jest and is well tested itself.

[cpojer]

This is something where we'll need some help from the community. I think a good way to support this is by adding a config option resolveSnapshots that points to a module with two functions:

exports.resolveSnapshotFile = testPath => snapshotFilePath;
exports.resolveTestFile = snapshotFilePath => testPath;

this way we can call these methods to resolve the snapshot path from a test path and the other way round and it will enable use to keep snapshot files consistent.