typescript - 如何配置 Typescript、Karma、Webpack 以在浏览器中运行测试

Question

我正在使用 Phaser3 开发一款游戏，并决定为游戏的某些组件添加一些测试。

我使用 Typescript 3.3 和 webpack 4 作为我的主要工具。我想在浏览器上运行测试，其中一些测试可能依赖于 Phaser 游戏库。过去我曾使用 Karma+Jasmine 来测试 Angular.js 应用程序，所以我想我会使用它。

经过一些设置后，我运行了测试，但由于某种原因，测试文件无法导入其他模块，而是出现错误

Compiled with warnings.
ℹ ｢wdm｣: Compiling...
✖ ｢wdm｣: 
ERROR in ./src/test/core/EntityFactory.spec.ts
Module not found: Error: Can't resolve './foo' in '<path to the project>/src/test/core'
 @ ./src/test/core/EntityFactory.spec.ts 1:0-26
ℹ ｢wdm｣: Failed to compile.

Module not found: Error: Can't resolve './foo' in '/<path to the project>/src/test/core'

提到的 /test/core 目录包含文件 EntityFactory.spec.ts 和 foo.ts。导入在套件中写为:

import thing from './foo';

下面是我的 karma 配置文件和它使用的 webpack 配置:

// Karma configuration
// Generated on Sun Mar 17 2019 17:03:14 GMT+0200 (EET)
const webpackConfig = require('./webpack.config').test;

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      '**/*.spec.ts'
      // each file acts as entry point for the webpack configuration
    ],

    mime: {
      "text/x-typescript": ["ts", "tsx"],
    },


    // list of files / patterns to exclude
    exclude: [
      // '**/*.spec.ts'
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
       // add webpack as preprocessor
      '**/*.spec.ts': [ 'webpack' ],

    },

    webpack: webpackConfig,

    webpackMiddleware: {
      // webpack-dev-middleware configuration
      // i. e.
      stats: 'errors-only'
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

和 Webpack 配置:

const baseConfig = {
  entry: './src/index.ts',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/',
    chunkFilename: '[name].js',
    filename: '[name].js'
  },

  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },

  // Source maps support ('inline-source-map' also works)
  devtool: 'source-map',

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      },
      {
        test: /\.js$/,
        use: ['source-map-loader'],
        enforce: 'pre'
      }
    ]
  },

  optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'initial'
        }
      }
    }
  },

  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, 'assets'),
        to: path.resolve(__dirname, 'build', 'assets')
      }
    ]),
    new webpack.DefinePlugin({
      CANVAS_RENDERER: JSON.stringify(true),
      WEBGL_RENDERER: JSON.stringify(true)
    }),
    new MiniHtmlWebpackPlugin({
      context: {
        title: 'Phaser game'
      },
      // FIXME: CSS-loader and default minithmlwebpack template would probably handle this better
      template: ({js, title, publicPath } ) =>
        `
        <!DOCTYPE html>
          <html>
            <head>
              <meta charset="UTF-8">
              <title>${title}</title>
              <style type = "text/css">
                body {
                    padding: 0;
                    margin: 0;
                  }
                  canvas {
                    display:block;
                    margin: 0;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  }
              </style>
            </head>
            <body>
             ${generateJSReferences(js, publicPath)}
            </body>
          </html>
        `
    })
  ]
};

function getTestConfig() {
  const config = _.cloneDeep(baseConfig);
  delete config.entry;
  return config;
}

getTestConfig() 函数稍微更改了 baseConfig 并将结果传递给 Karma 配置。

最后是开发依赖，以防万一可能有帮助:

  "devDependencies": {
    "@types/jasmine": "^3.3.10",
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "^2.2.2",
    "copy-webpack-plugin": "^4.6.0",
    "jasmine": "^3.3.1",
    "karma": "^4.0.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-jasmine": "^2.0.1",
    "karma-webpack": "^3.0.5",
    "mini-html-webpack-plugin": "^0.2.3",
    "prettier": "^1.16.4",
    "source-map-loader": "^0.2.4",
    "ts-loader": "^5.3.3",
    "tslint": "^5.12.1",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "^3.3",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  },

所以我的问题是，为什么测试似乎无法导入我要测试的模块？问题出在 Webpack、Karma 还是 Typescript？

Answer 1

这听起来像是 Typescript 没有编译您要包含的模块 (foo)。将重现错误的小测试用例放在一起会有所帮助，但您应该检查 tsconfig.json 以确保它包含您希望能够测试的所有代码。

我有一个单独的 tsconfig.test.json 覆盖应用程序的主要入口点(files: ["src/index.ts"])以及所有测试(包括:["src/**/*.spec.ts"])。如果你走这条路，也许可以制作一个带有常用选项的 tsconfig.base.json，然后将其包含在你的生产 tsconfig.json 以及测试中。然后你需要将你的 Webpack 配置指向正确的文件，比如

{
  test: /\.tsx?$/,
  use: {
    loader: 'ts-loader',
    options: {
      configFile: 'tsconfig.test.json',
    }
  }
},

您可以将 configFile 默认设置为 tsconfig.json，然后您的 getTestConfig() 函数可以更改它以供 使用 karma 网络包。