How do I use Node Typescript types with Karma-Webpack

877 views Asked by At

I have Webpack configured for transpiling my TS files in Karma. I have also included Node and CoreJS types. However, when I try to run my tests I get...

ERROR in ./test/karma/test.bundle.ts
(18,30): error TS2339: Property 'context' does not exist on type 'NodeRequire'.

I tried adding webpack-env using npm install --save-dev @types/webpack-env, but that gives me even more errors.

ERROR in /.../node_modules/@types/webpack-env/index.d.ts
(183,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'require' must be of type 'NodeRequire', but here has type 'RequireFunction'.

ERROR in /.../node_modules/@types/webpack-env/index.d.ts
(232,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'module' must be of type 'NodeModule', but here has type 'Module'.

ERROR in ./test/karma/test.bundle.ts
(18,30): error TS2339: Property 'context' does not exist on type 'NodeRequire'.

My Karma config looks like this...

var webpack = require("webpack");
module.exports = function(config) {
  var webpackConfig = require("../../webpack.config");
  // TODO: Can we get rid on this?
  // We need to remove entry points and plugins
  webpackConfig.plugins = [
    // IMPORTANT!!!! Without this source maps fail to show up.
    new webpack.SourceMapDevToolPlugin({
      filename: null, // if no value is provided the sourcemap is inlined
      test: /\.(ts|js)($|\?)/i // process .js and .ts files only
    })
  ];
  //This is used to remap can access (Based on https://github.com/sshev/karma-remap-coverage)
  webpackConfig.ts = {
    compilerOptions: {
      inlineSourceMap: true,
      sourceMap: false
    }
  };
  webpackConfig.module.postLoaders = [
    {
      test: /^((?!\.spec\.ts).)*.ts$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'istanbul-instrumenter'
    }
  ];
  webpackConfig.entry = {};

  var configuration = {
    autoWatch: true,
    basePath: "",
    browsers: ["Chrome"],
    colors: true,
    concurrency: Infinity,
    coverageReporter: {
      type: 'in-memory'
    },
    exclude: [
      "node_modules"
    ],
    files: [
      { pattern: "./test.bundle.ts", watched: true },
    ],
    frameworks: ["jasmine"],
    htmlReporter: {
      outputFile: "../../reports/units.html"
    },
    logLevel: config.LOG_INFO,
    port: 9876,
    preprocessors: {
      "./test.bundle.ts": ["webpack", "sourcemap" ],
    },
    remapCoverageReporter: {
      "text-summary": null,
      html: "./reports/coverage/html"
    },
    reporters: ["progress", "coverage", "remap-coverage", "html"],
    singleRun: false,
    webpack: webpackConfig,
    webpackMiddleware: { stats: "errors-only"}
  };
  config.set(configuration);
}; 

Versions

webpack 1.14.0, node v6.9.2, Typescript 2.1.4

0

There are 0 answers