"ReferenceError:未定义系统".与Angular2和.ts规格一起使用量角器时 [英] "ReferenceError: System is not defined" when using protractor with Angular2 and .ts specs

问题描述

我想使用打字稿编写的规范在Angular2中的hello world应用程序上进行e2e测试.但是，量角器崩溃并显示以下消息:

I want to do e2e testing on a hello world app in Angular2 with specs written in typescript. However, protractor crashes with the following message:

Using the selenium server at http://localhost:4444/wd/hub
[launcher] Running 1 instances of WebDriver
[launcher] Error: ReferenceError: System is not defined
    at Object.<anonymous> (C:\Dev\d2ipm\test\e2e\overview.js:1:1)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at C:\Users\%username%\AppData\Roaming\npm\node_modules\protractor\node_modules\jasmine\lib\jasmine.js:63:5
    at Array.forEach (native)
    at Jasmine.loadSpecs (C:\Users\%username%\AppData\Roaming\npm\node_modules\protractor\node_modules\jasmine\lib\jasmine.js:62:18)
[launcher] Process exited with error code 100

由于我按照Angular2的建议使用SystemJS，因此System包含在每个已编译的.js文件中，包括测试规范.我的index.html按照教程中的建议配置系统，该应用程序可以正常工作:

Since I use SystemJS as Angular2 suggests by default, System is contained in every compiled .js file, including the test specs. My index.html configures System as suggested in the tutorials, and the app works:

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        },
        globalEvaluationScope: false
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

使用纯JS编写的运行测试效果很好.如何使我的测试环境可见System?

Running tests written in pure JS works fine. How can I make my test environment see System?

推荐答案

通过量角器运行e2e测试时，实际上有2种环境:

When you run an e2e test through Protractor, there are actually 2 environments:

• 首先是正在测试的环境
  • 它在浏览器中运行，
  所述浏览器通过"Selenium Webdriver"控制.自动化系统，
  • 它会像最终使用的浏览器一样加载并执行您的整个应用程序，包括加载index.html文件.
  • The first is the environment being tested
    • it runs in a browser,
    • said browser is controlled through the "Selenium Webdriver" automation system,
    • it loads and execute your whole application as an end-used browser would, including loading the index.html file.
    • 在作为本地node.js应用程序运行时，
    • 它使用量角器，该量角器运行Jasmine，后者运行e2e测试文件
    • 它通过Selenium控制浏览器

    即使将库加载到index.html文件中，e2e-spec文件也无法访问它们.包括systemjs.当Typescript编译器使用"module": "system"

    Even if you load libraries in your index.html file, the your e2e-spec file won't have access to them. That includes systemjs. This is an issue when the Typescript compiler uses "module": "system"

    一种解决方案是配置构建过程，以便使用"module": "commonjs"选项编译e2e-spec文件.如果您希望能够将Web应用程序中的文件导入测试规范，则必须将整个应用程序编译两次(尽管我不确定有很多用例可以这样做).

    One solution is to configure your build process so that the e2e-spec files are compiled with the "module": "commonjs" option. If you want to be able to import files from your web application into the test spec, you would have to compile the whole application twice (though I am not sure there are much use cases where it makes sense to do so).

    例如，使用gulp

    const gulpTypings = require('gulp-typings')
    const sourcemaps = require('gulp-sourcemaps')
    const ts = require('gulp-typescript')
    
    const tsProject = ts.createProject('tsconfig.json')
    const tsProjectE2E = ts.createProject('tsconfig-e2e.json')
    
    const tsFiles = [
      'typings/index.d.ts',
      'app/**/*.ts',
      '!**/*.e2e-spec.ts',
      '!node_modules/**/*'
    ]
    
    const tsFilesE2E = [
      'typings/index.d.ts',
      'app/**/*.e2e-spec.ts',
      'app/**/*.ts', // You should not need that unless you use your app files in your tests
      '!node_modules/**/*'
    ]
    
    gulp.task('typings', () => gulp
      .src('./typings.json')
      .pipe(gulpTypings())
    )
    
    gulp.task('ts', ['typings'], () => gulp
      .src(tsFiles)
      .pipe(sourcemaps.init())
      .pipe(ts(tsProject))
      .js
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest('app'))
    )
    
    gulp.task('ts-e2e', ['typings'], () => gulp
      .src(tsFilesE2E)
      .pipe(sourcemaps.init())
      .pipe(ts(tsProjectE2E))
      .js
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest('e2e')) // Note that your compiled tests files are put in the e2e/ folder now
    )
    

    这篇关于"ReferenceError:未定义系统".与Angular2和.ts规格一起使用量角器时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！