New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jest snapshots recipies #870

Closed
Anupheaus opened this Issue Nov 16, 2016 · 8 comments

Comments

Projects
None yet
4 participants
@Anupheaus

Anupheaus commented Nov 16, 2016

Issue description

When I am running Wallabyjs in VS Code and using the Jest test framework and using snapshots; the snapshots are being stored in the projectCacheDir and not alongside the actual test files. This makes them very hard to find, for example; my default project cache dir is:

C:\\Users\\<user name>\\.vscode\\extensions\\WallabyJs.wallaby-vscode-1.0.30\\projects\\5fed588f722bddb1\\instrumented

Which also seems to imply that with a new version of wallaby and/or vscode, my snapshots might just disappear or not be found and used.

Furthermore, if I were to change the projectCacheDir to be more usable and not dependant on versions, I would still have the problem of actually source controlling them. They appear to be embedded within a folder structure identical to my project and seems to contain the same files as well within those folders, meaning any kind of source control would duplicate my test files in the source control repository.

Wallaby.js configuration file

var wallabyWebpack = require("wallaby-webpack");
var webpackConfig = require("./webpack.config.development");
var wallabyPostprocessor = wallabyWebpack(webpackConfig);

module.exports = function (wallaby) {
	return {
		files: [
			{ pattern: "node_modules/jquery/dist/jquery.js", instrument: false },
			{ pattern: "node_modules/babel-polyfill/dist/polyfill.js", instrument: false },
			{ pattern: "./tests/data/*.json", load: false },
			{ pattern: "./tests/*.js", load: false },
			{ pattern: "./src/**/*.js", load: false },
			{ pattern: "./src/**/*.less", load: false, instrument: false, }
		],
		tests: [
			{ pattern: "./tests/specs/**/*.test.js" }
		],
		env: {
			type: 'node',
			runner: 'node'
		},
		testFramework: "jest",
		compilers: {
			"**/*.js": wallaby.compilers.babel({ babel: require("babel-core") })
		},
	};
};

Code editor or IDE name and version

Visual Studio Code v1.7.1

OS name and version

Windows 10

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Nov 16, 2016

Member

You may run jest from command line for your project once and generate all snapshots in your local project's folder, so that you may commit them to your source control repository.

Then you may add *.snap files to your files list, so they get copied to the wallaby cache where it runs your tests from (to the projectCacheDir):

...
module.exports = function (wallaby) {
    return {
        files: [
            ...
            { pattern: "tests/**/*.snap" }
        ],
        tests: [
            ...
        ],
        ...
    };
};

This way when you run wallaby, it'll use your project's *.snap files. Whenever you need to change a snapshot, you can either change the snapshot directly (as any other source code), or run jest -u to let jest update it.

Does it make sense?

Member

ArtemGovorov commented Nov 16, 2016

You may run jest from command line for your project once and generate all snapshots in your local project's folder, so that you may commit them to your source control repository.

Then you may add *.snap files to your files list, so they get copied to the wallaby cache where it runs your tests from (to the projectCacheDir):

...
module.exports = function (wallaby) {
    return {
        files: [
            ...
            { pattern: "tests/**/*.snap" }
        ],
        tests: [
            ...
        ],
        ...
    };
};

This way when you run wallaby, it'll use your project's *.snap files. Whenever you need to change a snapshot, you can either change the snapshot directly (as any other source code), or run jest -u to let jest update it.

Does it make sense?

@Anupheaus

This comment has been minimized.

Show comment
Hide comment
@Anupheaus

Anupheaus Nov 16, 2016

Yep, that makes sense - thank you.

Yep, that makes sense - thank you.

@asvetliakov

This comment has been minimized.

Show comment
Hide comment
@asvetliakov

asvetliakov Nov 29, 2016

@ArtemGovorov
Is there a way to make a two-way syncronization for specific file patterns? I.e. file update in wallaby cache will be propagated to source files. I've tried to use react snapshot testing with mocha/chai (using chai-jest-snapshot) and found it very convenient, especially that you can pass flag to force update snapshot tree (expect(tree).to.matchSnapshot(file, name, true)) and wallaby will immediately execute it.

@ArtemGovorov
Is there a way to make a two-way syncronization for specific file patterns? I.e. file update in wallaby cache will be propagated to source files. I've tried to use react snapshot testing with mocha/chai (using chai-jest-snapshot) and found it very convenient, especially that you can pass flag to force update snapshot tree (expect(tree).to.matchSnapshot(file, name, true)) and wallaby will immediately execute it.

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Nov 30, 2016

Member

@asvetliakov Sure, if you'd like to automatically update your local project's .snap files with the copies from the wallaby cache, you may use the wallaby setup function that gets run before tests, and just adjust the fs.writeFileSync function that saves snapshot files to also save the file to the local project folder (if is it a .snap file being saved to the wallaby cache):

'use strict'
module.exports = function (wallaby) {

  return {

    ...

    setup: function (w) {
      const fs = require('fs');
      const path = require('path');
      let originalWriteFileSync = fs.writeFileSync;

      // only replacing the function once per process
      if (!originalWriteFileSync.alreadyReplaced) {
        fs.writeFileSync = function (filename, data, options) {
          // only syncing the file to the local project folder 
          // if it's a .snap file saved in wallaby cache
          if (path.extname(filename) === '.snap'
            && filename.indexOf(w.projectCacheDir) === 0) {
            originalWriteFileSync(
              path.join(w.localProjectDir, path.relative(w.projectCacheDir, filename)),
              data,
              options);
          }

          return originalWriteFileSync(filename, data, options);
        };
        fs.writeFileSync.alreadyReplaced = true;
      }

      ...

    },

    ...

  };
};

Hope it makes sense.

Member

ArtemGovorov commented Nov 30, 2016

@asvetliakov Sure, if you'd like to automatically update your local project's .snap files with the copies from the wallaby cache, you may use the wallaby setup function that gets run before tests, and just adjust the fs.writeFileSync function that saves snapshot files to also save the file to the local project folder (if is it a .snap file being saved to the wallaby cache):

'use strict'
module.exports = function (wallaby) {

  return {

    ...

    setup: function (w) {
      const fs = require('fs');
      const path = require('path');
      let originalWriteFileSync = fs.writeFileSync;

      // only replacing the function once per process
      if (!originalWriteFileSync.alreadyReplaced) {
        fs.writeFileSync = function (filename, data, options) {
          // only syncing the file to the local project folder 
          // if it's a .snap file saved in wallaby cache
          if (path.extname(filename) === '.snap'
            && filename.indexOf(w.projectCacheDir) === 0) {
            originalWriteFileSync(
              path.join(w.localProjectDir, path.relative(w.projectCacheDir, filename)),
              data,
              options);
          }

          return originalWriteFileSync(filename, data, options);
        };
        fs.writeFileSync.alreadyReplaced = true;
      }

      ...

    },

    ...

  };
};

Hope it makes sense.

@asvetliakov

This comment has been minimized.

Show comment
Hide comment
@asvetliakov

asvetliakov Nov 30, 2016

@ArtemGovorov
Thanks, i did something similar already by assigning real project directory to process.env (didn't know about w.localProjectDir) and using it as snapshot file part, but your solution is much better

@ArtemGovorov
Thanks, i did something similar already by assigning real project directory to process.env (didn't know about w.localProjectDir) and using it as snapshot file part, but your solution is much better

@ArtemGovorov ArtemGovorov changed the title from Jest snapshots being stored in projectCacheDir when run in vs code to Jest snapshots recipies Dec 2, 2016

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@justafreak

This comment has been minimized.

Show comment
Hide comment
@justafreak

justafreak Feb 2, 2017

Using the latest core, do I still need to use the wallaby setup function to update the snapshots?

Using the latest core, do I still need to use the wallaby setup function to update the snapshots?

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Feb 2, 2017

Member

@justafreak It depends. With the latest core, you may update specific snapshots with the Run line tests command from your editor. The setup function above, makes wallaby.js update snapshots automatically, if the some framework, like chai-jest-snapshot triggers the snapshot change.

Member

ArtemGovorov commented Feb 2, 2017

@justafreak It depends. With the latest core, you may update specific snapshots with the Run line tests command from your editor. The setup function above, makes wallaby.js update snapshots automatically, if the some framework, like chai-jest-snapshot triggers the snapshot change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment