[BUG] Tests fail in Angular 8 w/ latest core-js

[michael-letcher]

Issue description or question

I have created a new project using the Angular CLI (v.8) and imported Wallaby from our other Angular 7 apps (using the legacy core-js package). This app we updated to 3.1.3 and updated our polyfills to use import 'core-js/es/reflect';

On running Wallaby however most of the tests fail with the following errors:
Error: Can’t resolve all parameters for ApplicationModule: (?).

Note: your example Angular v7 app also uses the legacy package "core-js": "^2.5.4"

Similar issue #1900

To fix this if we downgrade, to v2 of core-js it seems to go away. Seems to be an issue with wallaby and core-js's v3 of reflect

Wallaby.js configuration file

var wallabyWebpack = require('wallaby-webpack');
var path = require('path');

var compilerOptions = Object.assign(
  require('./tsconfig.json').compilerOptions,
  require('./tsconfig.spec.json').compilerOptions
);

compilerOptions.module = 'CommonJs';

module.exports = function(wallaby) {
  var webpackPostprocessor = wallabyWebpack({
    entryPatterns: ['src/wallabyTest.js', 'src/**/*spec.js'],

    module: {
      rules: [
        { test: /\.css$/, loader: ['raw-loader'] },
        { test: /\.html$/, loader: 'raw-loader' },
        {
          test: /\.ts$/,
          loader: '@ngtools/webpack',
          include: /node_modules/,
          query: { tsConfigPath: 'tsconfig.json' },
        },
        { test: /\.js$/, loader: 'angular2-template-loader', exclude: /node_modules/ },
        { test: /\.styl$/, loaders: ['raw-loader', 'stylus-loader'] },
        { test: /\.less$/, loaders: ['raw-loader', { loader: 'less-loader' }] },
        { test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'sass-loader'] },
        { test: /\.(jpg|png|svg)$/, loader: 'url-loader?limit=128000' },
      ],
    },

    resolve: {
      extensions: ['.js', '.ts'],
      modules: [
        path.join(wallaby.projectCacheDir, 'src/app'),
        path.join(wallaby.projectCacheDir, 'src'),
        'node_modules',
      ],
      alias: {
        '@app': path.join(wallaby.projectCacheDir, 'src/app/'),
        '@shared': path.join(wallaby.projectCacheDir, 'src/app/shared'),
        '@env': path.join(wallaby.projectCacheDir, 'src/environments/'),
      },
    },
    node: {
      fs: 'empty',
      net: 'empty',
      tls: 'empty',
      dns: 'empty',
    },
  });

  return {
    files: [
      { pattern: 'src/**/*.+(ts|css|less|scss|sass|styl|html|json|svg)', load: false },
      { pattern: 'src/**/*.d.ts', ignore: true },
      { pattern: 'src/**/*spec.ts', ignore: true },
    ],

    tests: [
      { pattern: 'src/**/*spec.ts', load: false },
      { pattern: 'src/**/*e2e-spec.ts', ignore: true },
    ],

    hints: {
      ignoreCoverage: /ignore coverage/, // or /istanbul ignore next/, or any RegExp
    },

    testFramework: 'jasmine',

    compilers: {
      '**/*.ts': wallaby.compilers.typeScript(compilerOptions),
    },

    middleware: function(app, express) {
      var path = require('path');
      app.use('/favicon.ico', express.static(path.join(__dirname, 'src/favicon.ico')));
      app.use('/assets', express.static(path.join(__dirname, 'src/assets')));
    },

    env: {
      kind: 'chrome',
    },

    postprocessor: webpackPostprocessor,

    setup: function() {
      window.__moduleBundler.loadTests();
    },

    debug: false,
  };
};

Package.json

  "dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/material": "^8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "@ngrx/effects": "^7.4.0",
    "@ngrx/entity": "^7.4.0",
    "@ngrx/router-store": "^7.4.0",
    "@ngrx/store": "^7.4.0",
    "@ngrx/store-devtools": "^7.4.0",
    "chart.js": "^2.8.0",
    "core-js": "^3.1.3",
    "croppie": "^2.6.4",
    "hammerjs": "^2.0.8",
    "libphonenumber-js": "^1.7.18",
    "md5": "^2.2.1",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.25",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cdk": "~8.0.0",
    "@angular/cli": "~8.0.0",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/googlemaps": "^3.36.2",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "angular2-template-loader": "^0.6.2",
    "bootstrap": "^3.4.1",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-marbles": "^0.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "prettier": "^1.17.1",
    "protractor": "~5.4.0",
    "rxjs-tslint-rules": "^4.23.2",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "~3.4.3",
    "wallaby-webpack": "^3.9.15"
  }

wallabyTest.ts

import './polyfills';
import 'core-js/es/reflect';

import 'zone.js/dist/zone-testing';

import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';

getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

polyfills.ts

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** Safari 7 & 8, IE10 & 11, Android 4.1+ requires the following. */
import 'core-js/es';

// IE Support for Object.matches
if (!Element.prototype.matches) {
  Element.prototype.matches =
    (<any>Element.prototype).msMatchesSelector || Element.prototype.webkitMatchesSelector;
}

/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 * because those flags need to be set before `zone.js` being loaded, and webpack
 * will put import in the top of bundle, so user need to create a separate file
 * in this directory (for example: zone-flags.ts), and put the following flags
 * into that file, and then add the following code before importing zone.js.
 * import './zone-flags.ts';
 *
 * The flags allowed in zone-flags.ts are listed here.
 *
 * The following flags will work for all browsers.
 *
 * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 *
 *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 *  with the following flag, it will bypass `zone.js` patch for IE/Edge
 *
 *  (window as any).__Zone_enable_cross_context_check = true;
 *
 */

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone'; // Included with Angular CLI.

/***************************************************************************************************
 * APPLICATION IMPORTS
 */

// Angular Material https://material.angular.io/guide/getting-started#step-5-gesture-support
import 'hammerjs';

Code editor or IDE name and version

Visual Studio Code v1.34.0

OS name and version

OSX 10.14.5

[ArtemGovorov]

Doesn't look like a bug in Wallaby, looks like you are importing an incorrect path (core-js moved reflect metadata to proposals):

wallabyTest.ts

...
-import 'core-js/es/reflect';
+import 'core-js/proposals/reflect-metadata';
...

We'll take a look into our sample and figure out the best to configure it automatically.

[michael-letcher]

@ArtemGovorov Gold! Thanks mate!