Mocha test failing using babel and webpack

Question

So I am using webpack, babel, and mocha here. When I have code like this:

import userImage from '../../images/user.png';

and I build with webpack, userImage results in a string to the path of the file since I am using the file loader for images (requirements call for me not to embed images) however when I try to run my mocha tests using:

./node_modules/.bin/babel-node ./node_modules/.bin/babel-istanbul cover ./node_modules/.bin/_mocha

I get a syntax error:

SyntaxError: /repositories/react-seed/web/app/images/user.png: Unexpected character '�' (1:0)
> 1 | �PNG
    | ^
  2 |
  3 | 

I also get this error when removing istanbul. So it seems like it is trying to load the actually image file however can parse it as JavaScript since it is not.

Anyone know a way around this issue?

Answer 1

You can use the --compilers option which allows you to customize the nodejs require system in order to let it understand png files. So :

mocha --compilers png:./mochacfg.js

Or create a file 'test/mocha.opts' containing (better for your needs):

--compilers png:./mochacfg.js

With ./mochacfg.js:

require.extensions['.png'] = function(){ return null; }

This ignores png files (should be ok if you do nothing special with them).

If you want to do something with the image data:

var fs = require('fs');
require.extensions['.png'] = function(module, filepath) {
  var src = fs.readFileSync(filepath).toString ('base64');
  return module._compile('module.exports = "data:image/png;base64,' + src + '";');

}

Answer 2

Its quite late to answer this question but just for knowledge sharing purpose, I am answering another approach to do this.

Create a test-config.js file and use it while running the mocha test cases.

var jsdom = require('jsdom').jsdom;
process.env.NODE_ENV = 'test';

// -------------------------------
// Disable webpack-specific features for tests since
// Mocha doesn't know what to do with them.

['.css', '.scss', '.png', '.jpg'].forEach(ext => {
  require.extensions[ext] = () => null;
});

and inside package.json use this test command to run the test cases

"test": "mocha ./test/test-setup.js './test/**/*.spec.js' --compilers js:babel-core/register",

I hope it helps someone.