Karma not running tests that have "import" statements in karma-webpack

Question

I have some test files with tests I'd like to run against my app.

I am attempting to use karma, karma-webpack, karma-babel-preprocessor, karma-chrome-launcher, and jasmine in my testing. My app depends on many things, including backbone, marionette, etc. My app is built using webpack, and I am attempting to use webpack to bundle my files together for testing. (I initially wanted to see if I could skip this step, i.e. simply import a file to be tested, but it seems this is impossible.)

My test script looks like

package.json (scripts section)

"test": "./node_modules/karma/bin/karma start",

The rest of the files:

karma.conf.js

var webpackConfig = require('./config/webpack/webpack.test.conf.js');

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      { pattern: 'test/**/*.spec.js', watched: true },
      { pattern: 'test/*.spec.js', watched: true }
    ],
    exclude: [
    ],
    preprocessors: {
        'test/**/*.spec.js': ['webpack'],
        'test/*.spec.js': ['webpack']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
        stats: 'errors-only'
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,    
    logLevel: config.LOG_INFO,           
    autoWatch: true,       
    browsers: ['Chrome'],        
    singleRun: false,
    concurrency: Infinity
  })
}

test/test.spec.js This file is seen

describe("A suite", function () {
    it("contains spec with an expectation", function () {
        expect(true).toBe(true);
    });
});
describe("Another suite", function () {
    it("contains another spec with an expectation", function () {
        expect(true).toBe(false);
    });
});

test/models/devicegroup.spec.js This file is not seen

import backbone from 'backbone';

describe("backbone", function () {
    it("containsasdfasdfasdfasdfspec with an expectation", function () 
  {
        expect(true).toBe(false);
    });
});

My folder structure is:

- karma.conf.js
- test/
- - test.spec.js
- - models/
- - - devicegroup.spec.js
- public/
- - js/
- - - app.js

When my files don't have import statements at the top, karma will run and pass/fail as expected. Putting an import statement at the top will cause karma to ignore the file. No errors are thrown.

How can I make karma / karma-webpack run my tests that have import statements / what is the karma-safe way to import modules into my tests?

When test/models/devicegroup.spec.js does not have an import statement:

// import backbone from 'backbone';

describe("backbone", function () {
    it("contains with an expectation", function () {
        expect(true).toBe(false);
    });
});

the terminal output is: (notice one less test is run)

When test/models/devicegroup.spec.js does have an import statement:

import backbone from 'backbone';

describe("backbone", function () {
    it("contains with an expectation", function () {
        expect(true).toBe(false);
    });
});

the terminal output is:

I see no errors in the browser Karma opens.

EDIT:

I have experimented by adding my source files to the files and preprocessors attributes in my karma.conf.js file, as per this repo example. There was no change in behavior other than a massively increased testing time.

karma.conf.js

files: [
  { pattern: 'public/js/**/*.js', watched: true},
  { pattern: 'test/**/*.spec.js', watched: true },
  // each file acts as entry point for the webpack configuration
],

preprocessors: {
    // add webpack as preprocessor
    'public/js/**/*.js': ['webpack'],
    'test/**/*.spec.js': ['webpack'],
},

EDIT2: For the sake of experimentation (and based off this person's struggles), I have tried the above karma.conf.js in every possible combination - only test files in files and preprocessors, only source files, test files in one but not the other, source files in one but not the other, none, both. No good results, though occasionally new errors.

Answer 1

Little late, but I ran into the same problem, and was searching for hours, why my imports prevent the test suite from being executed. karma-webpack-4.0.0-rc.2 brought the enlightenment by providing error messages!!

I my case a couple of modules where not found, angular-mock, jquery, angular and more.

How to fix

Put there modules into the files array in your karma.config like:

files = [
  "node_modules/jquery/dist/jquery.js",
  "node_modules/angular/angular.js",
  "node_modules/angular-mocks/angular-mocks.js",
  { pattern: "test/**/*.ts", watched: false }

I hope, this helps someone.

EDIT

My current versions of the testing related packages:

"@types/jasmine": "^2.8.8",
"jasmine": "^3.2.0",
"jasmine-core": "^3.2.1",
"jasmine-reporters": "2.3.2",
"jasmine-ts": "^0.2.1",
"karma": "3.0.0",
"karma-chrome-launcher": "2.2.0",
"karma-jasmine": "1.1.2",
"karma-junit-reporter": "1.2.0",
"karma-phantomjs-launcher": "1.0.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.32",
"karma-webpack": "^4.0.0-rc.2",
"typescript": "3.0.3",
"webpack": "4.17.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "3.1.8"