[help wanted] Problem to setup wallaby + webpack + babel

[Drathal]

Hi, i have some problems setting up a wallaby.js config for this project: https://github.com/Drathal/angular-webpack-dashboard. Some tests are running, some not. Im using Webstorm 10.

Im getting:

ReferenceError: Can't find variable: require at webpack/test.bundle.js:1

Thats strange because some tests are running. I had a look at http://wallabyjs.com/docs/integration/webpack.html but i cant figure it out.

My wallaby.js config looks like:

var babel = require('babel');
var wallabyWebpack = require('wallaby-webpack');
var webpackTestConfig = require('./webpack/webpack.test.js')();
var path = require('path');

module.exports = function (wallaby) {

    delete webpackTestConfig.devtool;

    webpackTestConfig.entryPatterns = [
        'webpack/test.bundle.js',
        'src/**/*.spec.js'
    ];

    return {
        files: [
            {pattern: 'node_modules/karma-sinon-chai/node_modules/chai/chai.js', instrument: false},
            {pattern: 'node_modules/karma-sinon-chai/node_modules/sinon/lib/sinon.js', instrument: false},
            {pattern: 'node_modules/karma-sinon-chai/node_modules/sinon-chai/lib/sinon-chai.js', instrument: false},

            {pattern: 'src/assets/**/*', instrument: false},

            {pattern: 'node_modules/**/*.scss', load: false},
            {pattern: 'node_modules/**/*.css', load: false},
            {pattern: 'src/**/*.spec.js', ignore: true},
            {pattern: 'src/**/*.js', load: false},
            {pattern: 'src/**/*.scss', load: false},
            {pattern: 'src/**/*.css', load: false},
            {pattern: 'src/**/*.html', load: false},

            {pattern: 'webpack/test.bundle.js', instrument: false}
        ],

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

        compilers: {
            '**/*.js': wallaby.compilers.babel({babel: babel, stage: 0})
        },

        postprocessor: wallabyWebpack(webpackTestConfig),

        env: {
            type: 'browser'
        },

        testFramework: 'mocha',

        debug: true,

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

A second problem is that wallaby seems to have some problems with async loading of my translation files:

"before each" hook: workFn: 'undefined' is not a function (evaluating '__webpack_require__.e')
    at src/components/translation-loader-service/webpack.loadAsync.js:17
    at src/components/translation-loader-service/webpack.loadAsync.js:18
    at src/components/translation-loader-service/index.js:26

All karma / mocha tests are running.

> karma start
  component
    app
      directive
        ✓ should render the app directive
    bind-html-file
      directive
        ✓ should render the app directive
    counter ui
      controller
        ✓ should have a demo property
        ✓ should increment the counter
      directive
        ✓ should render the counter directive
    language select
      controller
        ✓ should have a changeLanguage function
        ✓ should have a openLanguageMenu function
        ✓ should open the language menu
        ✓ should have a change the languae on changeLanguage call
      directive
        ✓ should render the ui-language-select directive
    layout-full
      directive
        ✓ should render the app directive
    layout-sidebar
      controller
        ✓ should have a toggleSidebar function
        ✓ should close the sidenav on $locationChangeSuccess
        ✓ should set a title
      directive
        ✓ should render the app directive
    menu service
      handle document-body css on state change
        ✓ should add the new state
        ✓ should remove the old state
      service
        ✓ should add a menu
        ✓ should traverseMenu a menu
    menu-ui
      directive
        ✓ should render the app directive and add two menu items
    translation-loader-service
      ✓ should a new translation
      ✓ should add the language object
      ✓ should not return defered object when its not the last added lang
    user info
      controller
        ✓ should have a default name
        ✓ should open the menu
      directive
        ✓ should render the ui-user-info directive

PhantomJS 1.9.8 (Windows 8 0.0.0): Executed 26 of 26 SUCCESS (0.109 secs / 0.005 secs)
TOTAL: 26 SUCCESS

=============================== Coverage summary ===============================
Statements   : 89.2% ( 314/352 ), 3 ignored
Branches     : 96.77% ( 60/62 ), 17 ignored
Functions    : 75% ( 81/108 )
Lines        : 85.16% ( 218/256 )
================================================================================

[ArtemGovorov]

Just to let you know I have made some progress on trying to make it work, but got a bit stuck in some webpack internal details. Will let you know when I make some further progress.

[Drathal]

Thanks for taking a look into it.

[ArtemGovorov]

Hi Markus,

I have made the config working, please see my pull request.

There're a few changes there in wallaby config file. They include: few loaded webpack config adjustments, fixing sinon package path, setting load: false to test.bundle.js (it should not be loaded into the page via script tag, because marking it as an entry pattern will do the job). Please let me know if you have any questions about those changes, happy to explain in more detail.

Have also updated wallaby-webpack to 0.0.8, but as I can see you have already upgraded to the new version in your package.json.

Please let me know if it works for you.

[Drathal]

Hi Artem, thx for the fast help. I tested the changes and everything runs now. I will take a closer look to your changes today, right know everything makes sense to me :+1: