Error when including in project

[vilvadot]

Hello. Congrats for this amazing tool, cant wait to use it!

I tried including it in my current setup, runing tests with karma and mocha, and using Chai. You can see setup here:

https://github.com/davezuko/react-redux-starter-kit

The error comes when importing the module like the other ones:

wich should work perfectly. But I get a ton of errors:

WARNING in ./~/chai-jest-snapshot/~/jest-snapshot/build/SnapshotFile.js
Critical dependencies:
67:37-44 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/chai-jest-snapshot/~/jest-snapshot/build/SnapshotFile.js 67:37-44


ERROR in ./~/chai-jest-snapshot/~/jest-snapshot/~/jest-util/build/index.js
Module not found: Error: Cannot resolve module 'fs' in /myProject/node_modules/chai-jest-snapshot/node_modules/jest-snapshot/node_modules/jest-util/build
 @ ./~/chai-jest-snapshot/~/jest-snapshot/~/jest-util/build/index.js 13:11-24

SyntaxError: Unexpected token 'const'
at webpack:///~/chai-jest-snapshot/~/jest-snapshot/build/SnapshotFile.js:12:0 <- tests/test-bundler.js:113068

Apparently webpack is having some trouble using some core node modules?? Im very confused. Any light you could shed would be amazing.

thanks!

[suchipi]

Hi, thanks for the issue report. The issue here is that webpack can't use the fs module. fs uses native C bindings to write to the filesystem, and the browser has no way to do that. jest-snapshot (which chai-jest-snapshot depends on) writes files to the filesystem, so it needs fs.

You might be able to work around this by leveraging memory-fs via webpack's resolve.alias configuration option. This will create an in-memory virtual filesystem that the jest snapshots will be written to. You will then have to add code to read them out of that virtual fs after your tests run and do something with them (you could maybe run a WebDAV server and use it to write them back to your real filesystem). However, I do not know if this approach will work; if jest-snapshot relies on other native node modules that don't work in webpack, then you would need to find a way to shim those, too.

If you get a setup working, I'd be interested to hear about it.

[vilvadot]

Thank you very much @suchipi now I see, it makes a lot of sense. Apparently the virutal memory file system worked and Im not getting the fs error anymore. So I guess it correctly aliased fs for memory-fs. The problem is what you expected, other modules are also throwing errors.

What Im pretty curious is this line

ERROR in ./~/chai-jest-snapshot/~/jest-snapshot/~/jest-util/build/Console.js
Module not found: Error: Cannot resolve module 'console' in /Users/MrLaptop/WWW/advertiser-front/node_modules/chai-jest-snapshot/node_modules/jest-snapshot/node_modules/jest-util/build
 @ ./~/chai-jest-snapshot/~/jest-snapshot/~/jest-util/build/Console.js 35:16-34

Shouldn't be console working fine in the browser?

Im pretty new to testing in javascript, and this boilerplate structure is pretty complex for me, Im trying to make sense out of it. What I understand is:

Karma launches a PhantomJs instance to run tests vía Mocha, tests are bundled with webpack as to be able to use es6 and magic things. Since chai-jest-snapshot relies on building files to the filesystem and its being run in Phantom which is a browser, it can literally not do that. Thats why all these problems occur. Am I right?

So my question is, couldn't snapshots be built before the browser instance launches, webpack can extract CSS files and similar things, so I must assume it can write files? Or am I totally lost here?

Trying to comprehend it, sorry for the mental chaos!

[suchipi]

Webpack statically analyzes your files without running them in order to compile them together. That means that, without running any of your code, it looks for things like require or import and transforms them into something that can run in the browser. Then it puts all your files together into one bundle (usually; you can create multiple bundles, but you are probably only creating one, as that is the most common way webpack is configured). Since it doesn't run any of your code while it builds it, it wouldn't be useful for it to write snapshots at build time, because the only interesting part about snapshots are their contents, and to find out the contents of your snapshots, you have to run your code (which webpack doesn't do).

The reason your build is failing because it can't find console is because it can't find the native node.js module called console: https://nodejs.org/api/console.html

It's used like this:

const { Console } = require("console");
const out = someWritableStream();
const err = someOtherWritableStream();
const myConsole = new Console(out, err);

// behaves just like the global `console`, but logs to the streams you created it with,
// instead of stdout and stderr (which is what the global `console` does).
myConsole.log("hi");
myConsole.error("hi");

Webpack can't pull in any built-in node.js modules (such as console, fs, path, child_process, etc), and also can't pull in any node.js modules that rely on bindings to native code.

In the browser, there's no builtin way to create a Console that logs to arbitrary streams, but there is a global console that behaves the same as any instance of node's Console class. So you could shim the node.js builtin console module in your webpack bundle by using the global console any time something tries to create a Console. This may result in odd things being printed to the console, but it'll at least get you one step closer to your build working.

The shim might look like this:

module.exports = {
  console: window.console,
  Console: () => window.console,
};

[vilvadot]

@suchipi Thank you very much for the detailed explanation, now I understand where is the problem. I think Im going to focus more on trying to get the snapshot working independently from webpack since this looks like a though task, and I can't invest much more time in it :D I will probably return to tackle it in the future, so if I get any clear results, I will get back to you. Thanks!

[suchipi]

You might find use in https://www.npmjs.com/package/mocha-webpack