使用 Angular2 和 .ts 规格的量角器时出现“ReferenceError：系统未定义”

Question

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

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 按照教程中的建议配置系统，并且该应用程序可以正常工作：

    <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？

Answer 1

当你通过 Protractor 运行 e2e 测试时，实际上有 2 个环境：

• 首先是被测试的环境
  • 它在浏览器中运行，
  • 上述浏览器通过“Selenium Webdriver”自动化系统控制，
  • 它像最终使用的浏览器一样加载和执行整个应用程序，包括加载 index.html 文件。
• 第二个是自己运行测试的环境
  • 在作为本地 node.js 应用程序运行时，
  • 它使用量角器，运行 Jasmine，运行 e2e 测试文件
  • 它通过 Selenium 控制浏览器

即使您在 index.html 文件中加载库，您的 e2e-spec 文件也无法访问它们。这包括systemjs。这是 Typescript 编译器使用 "module": "system"

时的问题

如何解决？

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

例如，使用 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
)