Question

我在angular 6中有一个简单的应用程序组件。我为build和prod配置了我的webpack，并且都可以正常工作。我正在尝试为我的应用程序使用业力，茉莉花配置单元测试环境，但自昨天以来未成功。我只需要在没有e2e的情况下执行单元测试。安装我的业力和茉莉花。然后，我通过了业力初始化，生成了下面的文件。

//业力配置

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

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

    frameworks: ['jasmine'],

    files: [
      'src/index.ts',
      'src/**/**.spec.ts'
    ],
    mime: {
      'text/x-typescript': ['ts','tsx']
    },

    // list of files / patterns to exclude
    exclude: [
    ],
    preprocessors: {
    },

    reporters: ['progress'],
    port: 9876,


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


    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome']
    singleRun: false,
    concurrency: Infinity
  })
}

然后，我在名为mycomponent.spec.ts的组件中添加了一个简单的.spec.ts测试。

describe('example test', function () {
    it('should be true', function () {
        expect('foo').toBe('foo');
    });
});

运行测试时，出现以下错误。

Chrome 67.0.3396（Windows 7 0.0.0）错误{ “ message”：“在afterAll \ nUncaught SyntaxError中引发了错误：意外的令牌导出”， “ str”：“在afterAll \ nUncaught SyntaxError中引发了错误：意外的令牌导出”} Chrome 67.0.3396（Windows 7 0.0.0）：执行1 of 1错误（0.013秒/ 0.001秒）

从昨天开始，我一直在尝试解决此问题并设置我的环境。我遇到了使用业力打字稿的建议。但是，使用它时，我收到很多webpack错误。请我如何设置？任何帮助将不胜感激。

Answer 1

我在您的项目中添加了您的代码，并使用以下代码对其进行了修改。

请尝试以下代码，如果它不起作用，请告诉我

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

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

    frameworks: ['jasmine','@angular/cli' ],
        plugins: [
      require('karma-jasmine'),
      require('karma-jasmine-html-reporter'),
      require('karma-chrome-launcher'),
      require('karma-remap-istanbul'),
      require('@angular/cli/plugins/karma'),
      require('karma-coverage'),
      require('karma-sourcemap-loader'),
      require('karma-coverage-istanbul-reporter'),
      require('karma-spec-reporter')
    ],


    files: [
      'src/index.ts',
      'src/**/**.spec.ts'
    ],
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    client: {
            codeCoverage: config.angularCli.codeCoverage,
            clearContext: false
          },


    angularCli: {
            environment: 'dev',
            apps: config.angularCli.codeCoverage ? '1' : '0'
          },

    // list of files / patterns to exclude
    exclude: [
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },


    reporters: ['progress'],
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,

  })
}

角6中打字稿的业力和茉莉花配置

1 个答案: