Rewire with Webpack and Karma

[bunkat]

I can't figure out how to make this plugin work correctly. I'm using webpack and have installed the latest version of the plugin. I've tried adding the following to my webpack config:

module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel?stage=0', 'babel-loader?plugins=babel-plugin-rewire'],
        include: path.join(__dirname, 'src/js')
      },
     ...
}

I'm not seeing any errors from webpack, but when I then do the following:

sessionActions.js

export function login(email, password) {
    ...
};

tests/sessionActions-test.js

import * as SessionRewireAPI from '../sessionActions';

There is no __Rewire__ call being added to the module. Obviously I'm missing something and I can't figure out what. How exactly does the plugin get loaded? How can I test to see if it is getting loaded correctly?

I've also tried the following but then SesssionRewireAPI is just undefined.

import {login, __RewireAPI__ as SessionRewireAPI} from '../sessionActions';

[speedskater]

@bunkat I am not sure. But it could be that the problem is that you use babel loader twice.
"'babel?stage=0', 'babel-loader?plugins=babel-plugin-rewire'"
If this is not the case could you please create a small sample project which replicates your error.

[volkanunsal]

Same here...

[volkanunsal]

My problem was indeed loading the loader twice. That fixed it for me.

[damassi]

This is happening to me as well. Not sure if its due to the fact that I'm loading webpack via karma?

module.exports = function (config) {

  config.set({
    // browsers: ['PhantomJS'],
    browsers: ['Chrome'],

    frameworks: [
      'jasmine',
      'jasmine-matchers'
    ],

    reporters: ['progress', 'beep'],

    files: [
      'https://code.jquery.com/jquery-2.1.4.js',
      'public/scripts/vendor/tinymce/tinymce.full.js',
      'karma.tests.webpack.js'
    ],

    preprocessors: {
      'karma.tests.webpack.js': [
        'webpack',
        'sourcemap'
      ]
    },

    webpack: {
      devtool: 'inline-source-map',

      module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
              plugins: ['babel-plugin-rewire']
            }
          }
        ]
      }
    },

    webpackServer: {
      noInfo: true
    }
  });
};

[volkanunsal]

query: {
    plugins: ['babel-plugin-rewire']
}

I'd never seen the query for a loader written in this form before. According to the Webpack docs, query should be a string. That might be the root cause. For what it's worth, my loader config looks like this:

{
   test: /\.js$/,
   loader: 'babel?plugins[]=babel-plugin-rewire'
}

[speedskater]

@volkanunsal This might be the case. We use babel-plugin-rewire with webpack and karma with the following loader config:
loader: 'babel-loader?plugins=rewire'

[screendriver]

Same here. Any solution for that?

[speedskater]

@screendriver could you please provide a simple failing sample project?

[screendriver]

I made a sample project

Just make a npm install and after that npm test and you should see what's happening. Thank you 👍

[jseminck]

I have a sample working project here, which you could have a look at and see if it helps. It was created with another reason in mind, but perhaps it is useful: https://github.com/jseminck/karma-rewire-istanbul-example

[speedskater]

@screendriver thank you for your sample project. I created two pull request for your sample project making it work. Could please let me know if this helps?
@screendriver, @jseminck a soon as your sample projects are working, Would it be okay for you if I would link your projects in the README of the project?

[screendriver]

@speedskater thank you. It seems to work. But how can I rewire the whole function instead extracting the return value to a variable? For example if I have a function that returns internal state or something? If I remove the variable in my sample project the Rewire object is getting undefined.

[speedskater]

@screendriver you can mock a complete function as long as it represents a dependency in the module (in this context a dependency is anything defined at module scope which is used seomewhere in the module e.g. variable, class, function, import..)
If you never use the function imho the function itself doesn't make sense.

[olabalboa]

I'm trying to get babel-plugin-rewire to work in a project based on react-boilerplate with inspiration from https://github.com/jseminck/karma-rewire-istanbul-example by @jseminck. I't doesn't mess with babel loader in webpack config, instead rewire is added in the plugins section in .babelrc. I think this is a good way to configure babel-plugin-rewire but when I try to do it in my project the tests passes but report generation fails.

I have forked react-boilerplate, bumped some dependencies, changed karma config to use PhantomJS and added babel-plugin-rewire if someone would like to have a look https://github.com/olabalboa/react-boilerplate