wallaby.js: Uncaught ReferenceError: exports is not defined

[mobiledeve]

Issue description or question

I got the following errors when starting wallaby.js, and I have been scratching my head for a few days. Also, I think because wallaby.js failed to run, all lines are showing grey square for the code coverage.

I appreciated it very much for your help!

wallaby.js started core v1.0.455

Runtime error: Uncaught ReferenceError: exports is not defined at http://localhost:15328/app/RelationService.spec.js?1500549252726&wallabyFileId=5:3 Runtime error: Uncaught ReferenceError: exports is not defined at http://localhost:15328/app/DateTimeFormatter.spec.js?1500549252770&wallabyFileId=7:3 Runtime error: Uncaught Error: (SystemJS) http://localhost:15328/app/1st.spec.js did not call System.register or AMD define. If loading a global module configure the global name via the meta exports property for script injection support. Error: http://localhost:15328/app/1st.spec.js did not call System.register or AMD define. If loading a global module configure the global name via the meta exports property for script injection support. at ZoneDelegate.invokeTask (http://localhost:15328/node_modules/zone.js/dist/zone.js?636360992094303900&wallabyFileId=22:424:31) at Zone.runTask (http://localhost:15328/node_modules/zone.js/dist/zone.js?636360992094303900&wallabyFileId=22:191:47) at ZoneTask.invokeTask [as invoke] (http://localhost:15328/node_modules/zone.js/dist/zone.js?636360992094303900&wallabyFileId=22:498:34) at invokeTask (http://localhost:15328/node_modules/zone.js/dist/zone.js?636360992094303900&wallabyFileId=22:1364:14) at HTMLScriptElement.globalZoneAwareCallback (http://localhost:15328/node_modules/zone.js/dist/zone.js?636360992094303900&wallabyFileId=22:1382:17)

Wallaby.js configuration file

module.exports = function (wallaby) {
    return {
        files: [
          { pattern: 'node_modules/systemjs/dist/system-polyfills.js', instrument: false },
          { pattern: 'node_modules/systemjs/dist/system.js', instrument: false },
          { pattern: 'node_modules/core-js/client/shim.js', instrument: false },
          { pattern: 'node_modules/zone.js/dist/zone.js', instrument: false },
          { pattern: 'node_modules/zone.js/dist/long-stack-trace-zone.js', instrument: false },
          { pattern: 'node_modules/zone.js/dist/proxy.js', instrument: false },
          { pattern: 'node_modules/zone.js/dist/sync-test.js', instrument: false },
          { pattern: 'node_modules/zone.js/dist/jasmine-patch.js', instrument: false },
          { pattern: 'node_modules/zone.js/dist/async-test.js', instrument: false },
          { pattern: 'node_modules/zone.js/dist/fake-async-test.js', instrument: false },
          { pattern: 'node_modules/reflect-metadata/Reflect.js', instrument: false },
          { pattern: 'app/**/**.ts', load: false },
          { pattern: 'app/**/*.spec.ts', ignore: true }
        ],
        tests: [
          { pattern: 'app/**/*.spec.ts', load: false }
        ],

        env: {
            kind: 'electron',
            options: {
                webPreferences: {
                    nodeIntegration: true
                }
            }
        },
        middleware: function (app, express) {
            app.use('/node_modules',
              express.static(
                require('path').join(__dirname, 'node_modules')));
        },
        bootstrap: function (wallaby) {
            wallaby.delayStart();

            System.config(
              {
                  defaultJSExtensions: true,
                  packages: {
                      app: {
                          // for inline errors
                          meta: {
                              '*': {
                                  scriptLoad: true
                              }
                          }
                      },
                      rxjs: {
                          defaultExtension: 'js'
                      },
                  }
                ,
                  paths: {
                      "npm:*": "node_modules/*"
                  },
                  map: {
                      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
                      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
                      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
                      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
                      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
                      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
                      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
                      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

                      '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
                      '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
                      '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
                      '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
                      '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',

                      'rxjs': 'npm:rxjs',
                  }
              }
            );

            var promises = [
              Promise.all([
                System.import('@angular/core/testing'),
                System.import('@angular/platform-browser-dynamic/testing')
              ])

                .then(function (providers) {
                    var coreTesting = providers[0];
                    var browserTesting = providers[1];

                    coreTesting.TestBed.initTestEnvironment(
                      browserTesting.BrowserDynamicTestingModule,
                      browserTesting.platformBrowserDynamicTesting());
                })
            ];
            for (var i = 0, len = wallaby.tests.length; i < len; i++) {
                promises.push(System['import'](wallaby.tests[i].replace(/\.js$/, '')));
            }

            Promise.all(promises).then(function () {
                wallaby.start();
            }).catch(function (e) {
                setTimeout(function () {
                    throw e;
                }, 0);
            });
        }
    };
};
`

```javascript
tsconfig.json:
{
  "compilerOptions": {
        "target": "es2015",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true

  },
  "compileOnSave": true
}

==================================
systemjs.config.js:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',

    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs': 'node_modules/rxjs',
    'ng2-file-upload': 'node_modules/ng2-file-upload',
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'ng2-file-upload': { main: 'ng2-file-upload.js', defaultExtension: 'js' },
  };

  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];

  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }

  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }

  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);

  // No umd for router yet
  packages['@angular/router'] = { main: '/bundles/router.umd.js', defaultExtension: 'js' };

  var config = {
    map: map,
    packages: packages
  };

  System.config(config);

})(this);

==================================
package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "docker-build": "docker build -t ng2-quickstart .",
    "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
    "pree2e": "npm run webdriver:update",
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "webdriver:update": "webdriver-manager update"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/animations": "^4.1.0",
    "@angular/common": "^4.1.0",
    "@angular/compiler": "^4.1.0",
    "@angular/compiler-cli": "^4.1.0",
    "@angular/core": "^4.1.0",
    "@angular/forms": "^4.1.0",
    "@angular/http": "^4.1.0",
    "@angular/platform-browser": "^4.1.0",
    "@angular/platform-browser-dynamic": "^4.1.0",
    "@angular/platform-server": "^4.1.0",
    "@angular/router": "^4.1.0",
    "angular2-in-memory-web-api": "^0.0.21",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "lightbox2": "^2.9.0",
    "ng2-file-upload": "^1.2.1",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.3.1",
    "select2": "^4.0.3",
    "select2-bootstrap-css": "^1.4.6",
    "systemjs": "^0.19.39",
    "typescript": "^2.3.2",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.41",
    "canonical-path": "^0.0.2",
    "concurrently": "^3.0.0",
    "core-js": "^2.4.1",
    "electron": "^1.6.11",
    "http-server": "^0.9.0",
    "jasmine-core": "^2.5.2",
    "karma": "^1.6.0",
    "karma-chrome-launcher": "^2.1.1",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-html-reporter": "^0.2.7",
    "karma-htmlfile-reporter": "^0.3.5",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.4",
    "lightbox2": "^2.9.0",
    "lite-server": "^2.3.0",
    "lodash": "^4.17.4",
    "phantomjs": "^2.1.7",
    "protractor": "^4.0.14",
    "reflect-metadata": "^0.1.10",
    "rimraf": "^2.6.1",
    "rxjs": "^5.4.2",
    "select2": "^4.0.3",
    "select2-bootstrap-css": "^1.4.6",
    "systemjs": "^0.19.39",
    "tslint": "^3.15.1",
    "zone": "^0.3.4"
  },
  "repository": {}
}

### Code editor or IDE name and version
Visual Studio v2015

### OS name and version
Windows 8.1

[ArtemGovorov]

Could you please create and share a full sample repo where the issue could be reproduced? I'm happy to have a look and help with the config.

[mobiledeve]

I have committed the project with this issue to https://github.com/mobiledeve/WallabyTest

Can you please have a look? If possible, maybe you can update the repository directly if you think some changes need to be done to make Wallabyjs work with this project.

Thank you very much!

[mobiledeve]

A few more details: I'm using Visual Studio 2015, I have TypeScript 2.3.3 for Visual Studio installed, I have Wallabyjs for VS 2015 installed.

[ArtemGovorov]

Thanks for the repo, I have sent you the pull request to make it work.

Note that when you keep adding more tests/components to your angular app, you may need to configure System.js to correctly load templates/styles, for example by using a special loader (not related to wallaby).

If you do so, then don't forget to include your templates/styles to the files list and obviously you'll need to add the loader as well.

[mobiledeve]

Thank you so much! It worked! You are really nice and helpful!