首页 文章

第三方库测试角2 webpack

提问于
浏览
2

我正在使用角度2和第三方库来制作图表(AmCharts) . 我想出了如何沿角度2使用它,但是当我尝试对图表组件进行单元测试时出现错误:

Error: Error in ./ChartsComponent class ChartsComponent - inline template:1:2 caused by: AmCharts is not defined
    ReferenceError: AmCharts is not defined

这个项目是使用angular-cli创建的,我们最近将角度升级到版本2.2.1 .

这是angular-cli.json和karma.conf.js:

角cli.json

{
      "project": {
        "version": "1.0.0-beta.21",
        "name": "cli-crud-webpack"
      },
      "apps": [
        {
          "root": "src",
          "outDir": "dist",
          "assets": [
            "assets",
            "favicon.ico"
          ],
          "index": "index.html",
          "main": "main.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.json",
          "prefix": "gov",
          "mobile": false,
          "styles": [
            "styles.scss",
            "../public/assets/css/agate.css",
            "../public/assets/css/bootstrap.min.css"
          ],
          "scripts": [
            "../public/assets/js/highlight.pack.js",
            "../node_modules/amcharts3/amcharts/amcharts.js",
            "../node_modules/amcharts3/amcharts/xy.js",
            "../node_modules/amcharts3/amcharts/gauge.js",
            "../node_modules/amcharts3/amcharts/serial.js",
            "../node_modules/amcharts3/amcharts/pie.js",
            "../node_modules/amcharts3/amcharts/themes/light.js",
            "../node_modules/amcharts3/amcharts/themes/dark.js",
            "../node_modules/amcharts3/amcharts/themes/black.js",
            "../node_modules/amcharts3/amcharts/plugins/responsive/responsive.min.js"
          ],
          "environments": {
            "source": "environments/environment.ts",
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
        }
      ],
      "addons": [],
      "packages": [],
      "e2e": {
        "protractor": {
          "config": "./protractor.conf.js"
        }
      },
      "test": {
        "karma": {
          "config": "./karma.conf.js"
        }
      },
      "defaults": {
        "styleExt": "scss",
        "prefixInterfaces": false,
        "inline": {
          "style": false,
          "template": false
        },
        "spec": {
          "class": false,
          "component": true,
          "directive": true,
          "module": false,
          "pipe": true,
          "service": true
        }
      }
    }

karma.conf.js

module.exports = function (config) {
      config.set({
        basePath: '',
        frameworks: ['jasmine', 'angular-cli'],
        plugins: [
          require('karma-jasmine'),
          require('karma-chrome-launcher'),
          require('karma-remap-istanbul'),
          require('angular-cli/plugins/karma')
        ],
        files: [
          { pattern: './src/test.ts', watched: false }
        ],
        preprocessors: {
          './src/test.ts': ['angular-cli']
        },
        mime: {
          'text/x-typescript': ['ts','tsx']
        },
        remapIstanbulReporter: {
          reports: {
            html: 'coverage',
            lcovonly: './coverage/coverage.lcov'
          }
        },
        angularCli: {
          config: './angular-cli.json',
          environment: 'dev'
        },
        reporters: config.angularCli && config.angularCli.codeCoverage
                  ? ['progress', 'karma-remap-istanbul']
                  : ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false
      });
    };

1 回答

  • 2

    我刚刚发现我必须在karma配置文件中声明amcharts,如下所示:

    module.exports = function (config) {
          config.set({
            basePath: '',
            frameworks: ['jasmine', 'angular-cli'],
            plugins: [
              require('karma-jasmine'),
              require('karma-chrome-launcher'),
              require('karma-remap-istanbul'),
              require('angular-cli/plugins/karma')
            ],
            files: [
              { pattern: './src/test.ts', watched: false },
              "./public/assets/js/highlight.pack.js",
              "./node_modules/amcharts3/amcharts/amcharts.js",
              "./node_modules/amcharts3/amcharts/xy.js",
              "./node_modules/amcharts3/amcharts/gauge.js",
              "./node_modules/amcharts3/amcharts/serial.js",
              "./node_modules/amcharts3/amcharts/pie.js",
              "./node_modules/amcharts3/amcharts/themes/light.js",
              "./node_modules/amcharts3/amcharts/themes/dark.js",
              "./node_modules/amcharts3/amcharts/themes/black.js",
              "./node_modules/amcharts3/amcharts/plugins/responsive/responsive.min.js"
            ],
            preprocessors: {
              './src/test.ts': ['angular-cli']
            },
            mime: {
              'text/x-typescript': ['ts','tsx']
            },
            remapIstanbulReporter: {
              reports: {
                html: 'coverage',
                lcovonly: './coverage/coverage.lcov'
              }
            },
            angularCli: {
              config: './angular-cli.json',
              environment: 'dev'
            },
            reporters: config.angularCli && config.angularCli.codeCoverage
                      ? ['progress', 'karma-remap-istanbul']
                      : ['progress'],
            port: 9876,
            colors: true,
            logLevel: config.LOG_INFO,
            autoWatch: true,
            browsers: ['Chrome'],
            singleRun: false
          });
        };
    

相关问题