angular - WebdriverIO 和 Angular,在 typescript 中编写导入类的 e2e 测试(不能在模块外使用 import 语句)
问题描述
我正在尝试使一组 wdio 的 e2e 测试正常工作。一些测试使用一些用 typescript 编写的实用程序类。
编译测试时,它会遇到此错误:
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 并使用实用程序类。
我已经尝试了所有我能找到的选项,但没有一个能解决问题,只是运行这个简单的测试。特别是,似乎没有任何 babel 配置被拾取。
源代码位于https://github.com/rgansevles/angular-wdio6-builder-demo(克隆自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!');
});
});
解决方案
我懂了。有几件事要做:
tsconfig.json
在 e2e 文件夹中创建。该文件必须扩展基本的 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
. 因此,我TypeScript Auto Compiler
为 VSCode 安装了 -extension。
推荐阅读
- python - 为什么这个 tkinter 登录窗口不起作用?
- sql - 如何使用 sql 选择查询通过动态字段名称更新值
- julia - 使用 Plotly Julia 的下拉选择
- java - 从后台删除应用程序时也没有获取位置更新
- stored-procedures - 当我的存储过程出错时如何设置参数?
- android - 如何获取窗口(如对话框、弹出菜单...)
- reactjs - componentDidMount 没有获得道具值
- asp.net-core - FluentValidation with ASP.NET Core:确保验证处于活动状态
- docker - 为什么让 Docker 选择一个端口
- angular - 无法绑定到“ngModel”,因为它不是“ng-toggle”的已知属性