TypeError: Cannot read property '0' of undefined

[phun-ky]

I'm using karma-runner to run jasmine tests, with the setup below.

I'm getting this error when launching karma:

Chrome 41.0.2272 (Linux) ERROR
Uncaught TypeError: Cannot read property '0' of undefined  at tmp/cc96bc0f13c8df482b64e5d6150bb474.browserify:27303:0 <- ../../../../../../node_modules/rewire/lib/moduleEnv.js:7:0

karma.conf.js: https://gist.github.com/phun-ky/8dbc66b211c718252e58

Rewire module from http://substantial.com/blog/2014/11/11/test-driven-react-how-to-manually-mock-components/ :
var rewireModule = function rewireModule(rewiredModule, varValues) {
var rewiredReverts = [];

  beforeEach(function() {
    var key, value, revert;
    for (key in varValues) {
      if (varValues.hasOwnProperty(key)) {
        value = varValues[key];
        revert = rewiredModule.__set__(key, value);
        rewiredReverts.push(revert);
      }
    }
  });

  afterEach(function() {
    rewiredReverts.forEach(function(revert) {
      revert();
    });
  });

  return rewiredModule;
};

module.exports = rewireModule;

Spec used:

/**
  @see http://substantial.com/blog/2014/11/11/test-driven-react-how-to-manually-mock-components/
*/
var React = require("react/addons");
var TestUtils = React.addons.TestUtils;
var rewire = require("rewire");
var rewireModule = require("../../rewire-module.js");

describe('MainComponent', function() {
  var component;

  // `rewire` instead of `require`
  var MainComponent = rewire("../components/MainComponent.react.js");

  // Replace the required module with a stub component.
  rewireModule(MainComponent, {
    ComponentA: React.createClass({
      render: function() { return <div />; }
    }),
    ComponentB: React.createClass({
      render: function() { return <div />; }
    }),
    ComponentC: React.createClass({
      render: function() { return <div />; }
    }),
    ComponentD: React.createClass({
      render: function() { return <div />; }
    })
  });

  // Render the component from the rewired module.
  beforeEach(function() {
    component = TestUtils.renderIntoDocument( <MainComponent /> );
  });

  it("renders", function() {
    var foundComponent = TestUtils.findRenderedDOMComponentWithClass(
      component, 'MainComponent');

    expect(foundComponent).toBeDefined();
  });
});

Using these node modules:

"bootstrap": "^3.3.2",
"browserify": "^8.1.3",
"coffee-script": "^1.9.1",
"flux": "^2.0.1",
"gulp": "^3.8.11",
"gulp-bump": "^0.3.0",
"gulp-clean": "0.3.1",
"gulp-jasmine": "^2.0.0",
"gulp-jsdoc": "^0.1.4",
"gulp-jshint": "^1.9.2",
"gulp-less": "^3.0.0",
"gulp-minify-css": "^1.0.0",
"gulp-print": "1.1.0",
"gulp-react": "^3.0.1",
"gulp-rename": "1.2.0",
"gulp-sourcemaps": "^1.3.0",
"gulp-tap": "^0.1.3",
"gulp-uglify": "^1.1.0",
"gulp-util": "^3.0.3",
"gulp-verb": "^0.3.0",
"hammerjs": "^2.0.4",
"instafeed.js": "git+https://github.com/gunnarbergem/instafeed.js.git",
"jQuery.mmenu": "git+https://github.com/ganchenkor/jQuery.mmenu.git",
"jasmine-core": "^2.2.0",
"jquery": "^2.1.3",
"jquery-ui": "^1.10.5",
"jquery-ui-touch-punch": "^0.2.3",
"jsdoc-to-markdown": "^0.6.4",
"jshint-stylish": "^1.0.1",
"karma": "^0.12.31",
"karma-browserify": "^4.0.0",
"karma-chrome-launcher": "^0.1.7",
"karma-jasmine": "^0.3.5",
"karma-phantomjs-launcher": "^0.1.4",
"lodash": "^3.1.0",
"moment": "^2.9.0",
"object-assign": "^2.0.0",
"react": "^0.12.2",
"react-hammerjs": "^0.1.3",
"react-mini-router": "^1.0.0",
"react-tools": "^0.12.2",
"reactify": "^1.0.0",
"remarkable": "^1.6.0",
"rewire": "^2.3.1",
"underscore": "^1.7.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.0.0",
"watchify": "^2.3.0"

NodeJS v0.12.0

[jhnns]

It looks like you're using browserify. Browserify + rewire is currently not supported #13

[pjanuario]

@phun-ky same here... did you find any workaround for this? :/

[jhnns]

Unfortunately there is no simple workaround because it's not a bug. rewire() is interfering with the require() mechanism which must be emulated when using browserify. I've pointed out the required steps.