如何使用Jasmine和Webpack运行Typescript（而不是AngularJs）单元测试

2 回答

• 4

  Ngz答案仍然包括角度和许多额外的东西 . 所以我会尽力回答这些必需品 .

  test-webpack-config.js将测试作为入口点，因为webpack从那里查找依赖项，而ts-loader进行转换：

  var webpack = require('webpack');
  var path = require('path');
  
  module.exports = {
    devtool: '#inline-source-map',
  
    entry: [
      './test/index.spec.ts',
    ],
  
    output: {
      filename: 'dist/bundle.js'
    },
  
    plugins: [
      new webpack.NoEmitOnErrorsPlugin(),
      new webpack.LoaderOptionsPlugin({
        debug: true
      })
    ],
  
    resolve: {
      extensions: ['.ts', '.js', '.tsx']
    },
  
    module: {
      rules: [
        {
          test: /\.ts$/, use: [{
            loader: 'ts-loader'
          }]
        }]
    }
  };
  

  我用karma作为测试运行器，使用karma-webpack插件，这里是配置：

  var webpackConfig = require('./test-webpack.config.js');
  
  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: [
        'test/*.spec.ts',
      ],
  
  
      // list of files to exclude
      exclude: [
      ],
  
  
      // preprocess matching files before serving them to the browser
      // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
      preprocessors: {
         'test/**/*.spec.ts': ['webpack'],
         'src/**/*.ts': ['webpack'],
      },
  
  
      // 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: true,
  
  
      // 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, 
  
      mime: {
        'text/x-typescript': ['ts','tsx']
      },
  
      // Set Webpack configuration, but set the entry to spec files
      webpack: {
        module: webpackConfig.module,
        resolve: webpackConfig.resolve
      }
    })
  }
  

  mime部分是使用打字稿进行测试的关键 .

  完整示例：https://github.com/SierraNL/webpack-typescript-jasmine

  回复于 2024-04-25T21:00:26+08:00
• 4

  您需要设置一个测试运行器并将其配置为使用稍微不同的Webpack配置进行测试 . 对于这个例子，我使用了Karma和karma-webpack插件 .

  您需要为测试包创建一个单独的条目文件，并在您的karma配置文件的 files 和 preprocessors 属性值中引用它：

  // /test/karma.conf.js
  const argv = require('yargs').argv;
  const isDebug = argv.debug === 'true';
  const isCoverage = argv.coverage === 'true';
  const path = require('path');
  const webpack = require('webpack');
  
  // Optional instrumentation loader for coverage reporting
  const instrumentLoader = {
      test: /\.js$|\.ts$/,
      enforce: 'post',
      use: [
          {
              loader: 'istanbul-instrumenter-loader',
              options: {
                  esModules: true
              }
          }
      ],
      exclude: /node_modules/
  };
  
  const coverageReporter = {
      reporters: [
          {
              type: 'text-summary'
          }
      ]
  }
  
  module.exports = (config) => {
      config.set(Object.assign({
              browsers: [isDebug ? 'Chrome' : 'PhantomJS'],
              files: [
                  // test bundle entry file
                  './test.entry.js'
              ],
              frameworks: ['jasmine', 'es6-shim'],
              reporters: isDebug ? ['spec'] : ['spec', 'coverage'],
              singleRun: !isDebug,
              autoWatch: isDebug,
              preprocessors: {
                  // test bundle entry file
                  './test.entry.js': ['webpack']
              },
              webpackMiddleware: {
                  stats: 'errors-only'
              }
          },
          (isCoverage ? { coverageReporter } : {}),
          {
              webpack: {
                  devtool: 'eval-source-map',
                  resolve: {
                      extensions: [
                          '.js',
                          '.ts',
                          '.less',
                          '.html',
                          '.json'
                      ],
                      modules: [path.resolve(process.cwd(), 'src/client'), 'node_modules']
                  },
                  module: {
                      rules: [
                          {
                              test: /\.js$/,
                              use: [
                                  'babel-loader'
                              ],
                              exclude: /node_modules/
                          },
                          {
                              test: /\.ts$/,
                              use: [
                                  'babel-loader',
                                  {
                                      loader:'ts-loader',
                                      options: {
                                          entryFileIsJs: true
                                      }
                                  }
                              ],
                              exclude: /node_modules/
                          }
                      ].concat(isCoverage ? [instrumentLoader] : [])
                  }
              }
          }
      ));
  };
  

  然后创建测试包入口点：

  // /test/test.entry.js
  // Add polyfills/vendor libs for your tests
  import 'babel-core/register';
  import 'babel-polyfill';
  
  // Build a context of files matching our pattern
  const context = require.context('./', true, /^\.\/.*\.spec\.(js|ts)$/);
  
  // Require all of the files in the context
  context.keys().forEach(context);
  

  然后你可以通过 karma.conf.js 的路径和 --debug 和 --coverage 的参数来调用Karma：

  $ karma start ./test/karma.conf.js --coverage=true --debug=false
  

  或者更好的是，将它放入package.json scripts 属性：

  // package.json
  {
      ...
      "scripts": {
          "test": "cross-env karma ./test/karma.conf.js",
          "test:watch": "cross-env karma ./test/karma.conf.js --debug=true",
          "test:coverage": "cross-env karma ./test/karma.conf.js --coverage=true",
      }
      ...
  }
  

  并使用npm调用： npm run test

  回复于 2024-04-25T21:00:26+08:00