jeffling / wallaby-webpack

webpack preprocessor for wallabyjs
25 stars 8 forks source link

Best way to load specHelper? #14

Closed aaronjensen closed 9 years ago

aaronjensen commented 9 years ago

I have a file that I want to require before all other specs. I'm trying to avoid writing require('specHelper') in every spec manually. With karma, I create an index.js that requires it and then requires all specs.

With wallaby/wallaby-webpack I can't figure out the right combination of things to do this. The closest I got was:

/*eslint-disable*/
var babel = require('babel');
var wallabyWebpack = require('wallaby-webpack');
var webpackConfig = require('./webpack.wallaby.config');
var path = require('path');

module.exports = function(wallaby) {
  // Wallaby copies files over, so any hard-coded paths we have must change
  webpackConfig.resolve.root = path.join(wallaby.projectCacheDir, 'js');

  var wallabyPostprocessor = wallabyWebpack(webpackConfig);
  var babelCompiler = wallaby.compilers.babel({ babel: babel, stage: 1 });

  return {
    files: [
      {pattern: 'node_modules/chai/chai.js', instrument: false},
      {pattern: 'node_modules/sinon/pkg/sinon.js', instrument: false},
      {pattern: 'node_modules/sinon-chai/lib/sinon-chai.js', instrument: false},
      {pattern: 'public/assets/static/**/*', instrument: false},

      // This gets loaded and preprocessed
      {pattern: 'specs/specHelper.js', instrument: false},

      {pattern: 'js/**/*.js', load: false},
      {pattern: 'specs/support/**/*.js', load: false},
    ],

    tests: [
      {pattern: 'specs/**/*.spec.js', load: false},
    ],

    preprocessors: {
      'specs/specHelper.js': function(file) { return babel.transform(file.content, {sourceMap: true}) },
    },

    compilers: {
      'js/**/*.js': babelCompiler,
      'specs/**/*.js': babelCompiler,
    },

    postprocessor: wallabyPostprocessor,

    env: {
      type: 'browser',
      runner: path.join(__dirname, 'node_modules/.bin/phantomjs'),
    },

    testFramework: 'mocha',

    bootstrap: function() {
      window.expect = chai.expect;
      window.__moduleBundler.loadTests();
    },
  }
}

But that doesn't let that file go through wepback, so I can do any requires. Is there a better way? I've also tried webpack's Provide plugin, but that didn't work.

ArtemGovorov commented 9 years ago

Thanks for the config. We have had an option to do what you want in wallabify (wallaby plugin for browserify) for a while now, but not in wallaby-webpack. Today I have added the option to wallaby-webpack, please npm update the wallaby-webpack package to v0.0.6.

So it's an option passed with webpack config (the one that you pass to wallabyWebpack) and called entryPatterns. Without it, wallaby-webpack will only use your files from tests list as entry points. But when you specify entryPatterns (a pattern or an array of patterns), wallaby will use these patterns instead to determine what are your entry points. So you'll have to add:

// tests + specHelper will be webpack-ed entry points
webpackConfig.entryPatterns = ['specs/**/*.spec.js', 'specs/specHelper.js'];
...
files: [
      ...
      // // we need the file to be webpack-ed as others to resolve all requires
      {pattern: 'specs/specHelper.js', load: false},

This way wallaby-webpack should load webpack-ed specHelper.js before running tests, so you may require anything from it and may set any global/window stuff to later use from your tests.

Please let me know if the solution works for you.

aaronjensen commented 9 years ago

This worked, thank you!