WebdriverIO 和 Angular，在导入类的打字稿中编写 e2e 测试（不能在模块外使用导入语句）

Question

我正在尝试使一组 wdio 端到端测试正常工作。一些测试使用一些用 typescript 编写的实用程序 classes。

编译测试时遇到此错误：

Spec file(s): D:\TEMP\xx\angular-wdio6-builder-demo\e2e\test\specs\basic.spec.ts                                                                               
 Error:  D:\TEMP\xx\angular-wdio6-builder-demo\e2e\test\specs\basic.spec.ts:1                                                                                  
import {Util} from '../util/util.spec';                                                                                                                        
^^^^^^                                                                                                                                                         
                                                                                                                                                               
SyntaxError: Cannot use import statement outside a module                                                                                                      
    at wrapSafe (internal/modules/cjs/loader.js:1054:16)                                                                                                       
    at Module._compile (internal/modules/cjs/loader.js:1102:27)                                                                                                
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)                                                                                  
    at Module.load (internal/modules/cjs/loader.js:986:32)                                                                                                     
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)                                                                                           
    at Module.require (internal/modules/cjs/loader.js:1026:19)                                                                                                 
    at require (internal/modules/cjs/helpers.js:72:18)                                                                                                         
    at D:\TEMP\xx\angular-wdio6-builder-demo\node_modules\@wdio\jasmine-framework\node_modules\jasmine\lib\jasmine.js:89:5                                     
    at Array.forEach (<anonymous>)                                                                                                                             
    at Jasmine.loadSpecs (D:\TEMP\xx\angular-wdio6-builder-demo\node_modules\@wdio\jasmine-framework\node_modules\jasmine\lib\jasmine.js:88:18)                
[0-0] RUNNING in chrome - D:\TEMP\xx\angular-wdio6-builder-demo\e2e\test\specs\basic.spec.ts

以上输出来自 WebdriverIO Boilerplate Projects 之一的克隆。我所做的唯一更改（除了 chromedriver 更新之外）是将此示例中的测试更改为 typescript 并使用实用程序 class.

我已经尝试了我能找到的所有选项，但是 none 解决了这个问题，只是运行进行了这个简单的测试。特别是，似乎没有任何 babel 配置被拾取。

来源位于https://github.com/rgansevles/angular-wdio6-builder-demo (clone from https://github.com/migalons/angular-wdio6-builder-demo)

要复制，克隆我的 repo 和运行:

npm install
npm run e2e

有谁知道如何让这个示例与 import 语句一起工作？

提前致谢，

罗布

顺便说一句，这是它在 e2e/test/specs/basic.spec.ts 上失败的测试文件：

import {Util} from '../util/util.spec';

const util = new Util();

describe('webdriver.io page', () => {
  it('should have the right title', () => {
    browser.url('');
    const title = browser.getTitle();
    expect(title).toEqual(util.browserTitle);
  });

  it('should say app is running', () => {
    browser.url('');
    const message = $('body > app-root > div.content > div.card.highlight-card.card-small > span').getText();
    expect(message).toEqual('angular-wdio6-builder-demo app is running!');
  });
});

Answer 1

您可以尝试将 babel 设置添加到 wdio js 文件中的测试框架，例如：

摩卡咖啡：

mochaOpts: {
         ui: 'bdd',
        require: ['@babel/register', './test/helpers/common.js'],
        // ...
    },

茉莉花:

jasmineNodeOpts: {
        // Jasmine default timeout
        helpers: [require.resolve('@babel/register')],
        // ...
    },

Answer 2

我明白了。有几件事要做：

在 e2e 文件夹中创建 tsconfig.json。此文件必须扩展基本 tsconfig.json 并且必须覆盖：
- "module": "commonjs"
- "types": ["node", "@wdio/sync", "@wdio/jasmine-framework"]
修改wdio.conf.js以编译打字稿
- 在规格模式中使用 ts 而不是 js
- 将 requires: ['ts-node/register'] 添加到 jasmineNodeOpts
在 package.json 中，您必须向脚本添加环境 e2e
- "e2e": "TS_NODE_PROJECT=e2e/tsconfig.json ng e2e"

我分叉了相同的回购并在此处进行了更改：https://github.com/Michel73/angular-wdio6-builder-demo

还剩下一件事：在我的 VSCode 中，basic.spec.ts 显示编译错误，因为似乎 VSCode 总是采用基本的 tsconfig.js。因此我为 VSCode.

安装了 TypeScript Auto Compiler 扩展

WebdriverIO 和 Angular，在导入类的打字稿中编写 e2e 测试（不能在模块外使用导入语句）

WebdriverIO and Angular, writing e2e tests in typescript that import classes (Cannot use import statement outside a module)

typescript

angular

wdio-jasmine

wdio-v6

WebdriverIO 和 Angular，在导入 类 的打字稿中编写 e2e 测试（不能在模块外使用导入语句）

WebdriverIO and Angular, writing e2e tests in typescript that import classes (Cannot use import statement outside a module)

typescript

angular

wdio-jasmine

wdio-v6

WebdriverIO 和 Angular，在导入类的打字稿中编写 e2e 测试（不能在模块外使用导入语句）