mocha-webpack: Error with source maps & jsdom

Using mocha-babel with jsdom seems to causes some confusion with source-map-support…

$ $(npm bin)/mocha-webpack --opts test/mocha-webpack.opts
/Users/thom/dev/sandbox/app-client/node_modules/source-map-support/source-map-support.js:411
      var hasStack = (arguments[1] && arguments[1].stack);
                                                  ^

TypeError: Invalid URL

My webpack test config, pretty much straight from the docs:

const nodeExternals = require('webpack-node-externals');

module.exports = {
  target: 'node', // in order to ignore built-in modules like path, fs, etc.
  externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
  module: { .... }
  output: {
    // sourcemap support for IntelliJ/Webstorm
    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
    devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
  },
  devtool: 'cheap-module-source-map',
};

mocha-webpack.opts:

--recursive
--colors
--reporter list
--ui bdd
--timeout 2000
--require source-map-support/register
--require test/register.js
--webpack-config config/webpack.test.config.js
**/__tests__/*.js

test/register.js sets up jsdom:

//require('babel-register')({
  // make sure you use the same presets as in webpack.config.js:
//  presets: ['react', 'es2015', 'stage-1'],
//});
const jsdom = require('jsdom').jsdom;

const exposedProperties = ['window', 'navigator', 'document'];

const document = jsdom('');
global.document = document;
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property);
    global[property] = document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js',
};

I’ve tried adding require('source-map-support/register'); at the top or bottom of register.js and also tried changing the order of --register lines in my mocha-webpack.opts with no success…

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 15 (2 by maintainers)

Most upvoted comments

Ok I think I figured out, instead of using require('source-map-support/register'); I needed to do the following, I put it at the bottom of register.js after I setup jsdom:

require('source-map-support').install({environment:'node'});

This appears to give an accurate sourcemap if an exception is thrown from my application code. However it doesn’t seem to provide correct source maps for the actual test files:

test example.js:

describe('a failing test', () => {
  it("should print a stack trace pointing to this file", () => {
    throw new Error('boom');
  });
});

When I run it… (note the last line)

$ $(npm bin)/mocha-webpack --opts test/mocha-webpack.opts

  1) a failing test should print a stack trace pointing to this file

  0 passing (11ms)
  1 failing

  1) a failing test should print a stack trace pointing to this file:
     Error: boom
      at Context.<anonymous> (.tmp/mocha-webpack/09e4ba4225623e5575afb37f2f258d2f:11:1)

thom-nic on Oct 6, 2016