e2e tsconfig中找不到类型: 错误 TS2304: 找不到名称为'browser'的类型

Question

我正在尝试使用简单的WebdriverIO E2E测试来设置Angular示例项目，但在我的E2E测试中遇到了一些编译错误。

tsconfig 设置

该项目的设置具有以下重要文件：

e2e / test / [e2e test code]
e2e / tsconfig.e2e.json
e2e / wdio.conf.js
package.json
tsconfig.json

我的基本tsconfig.json如下：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2018",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

tsconfig.e2e.json 的内容如下：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "../dist/out-tsc/e2e",
    "baseUrl": "./",
    "target": "es2018",
    "types": [
      "node",
      "@wdio/sync",
      "@wdio/jasmine-framework",
      "jasminewd2"
    ]
  }
}

输出

从我的IDE终端运行tsc或尝试执行package.json中的e2e脚本会导致以下错误:

[0-0] 2021-02-09T15:47:53.019Z WARN @wdio/jasmine-framework: Unable to load spec files quite likely because they rely on `browser` object that is not fu
lly initialised.
`browser` object has only `capabilities` and some flags like `isMobile`.
Helper files that use other `browser` commands have to be moved to `before` hook.
Spec file(s): C:\dev\source\rme\angular-wdio6-builder-demo\e2e\test\specs\basic.spec.ts
 Error:  TSError: ⨯ Unable to compile TypeScript:
e2e/test/specs/basic.spec.ts(7,5): error TS2304: Cannot find name 'browser'.
e2e/test/specs/basic.spec.ts(8,19): error TS2304: Cannot find name 'browser'.
e2e/test/specs/basic.spec.ts(13,5): error TS2304: Cannot find name 'browser'.
e2e/test/specs/basic.spec.ts(14,21): error TS2581: Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i @types/jquery`.

我的预感和MRE

完整的MRE可以在GitLab这里找到，该MRE是基于这个问题创建的。它包括一个CI脚本，显示了我在本地运行时遇到的错误输出。

还请注意，我的intellij IDE可以很好地引用browser对象，ctrl-clicking它会向我显示browser变量位于node_modules\@wdio\sync\webdriverio.d.ts文件中。

编辑/附加： 在package.json中有一个pree2e脚本，在e2e之前执行，它调用e2e/e2e.cmd：

set TS_NODE_PROJECT=e2e/tsconfig.e2e.json

编辑2：wdio.conf.js配置文件：

完整的文件（包括生成的注释）也在最小可复制示例中：e2e/wdio.conf.js

exports.config = {
    runner: 'local',
    path: '/',
    specs: [
      `${__dirname}/test/specs/**/*.ts`
    ],
    exclude: [
    ],
    maxInstances: 10,
    capabilities: [{
        maxInstances: 5,
        browserName: 'chrome',
    }],
    logLevel: 'warn',
    bail: 0,
    baseUrl: `http://localhost:${process.env.PORT || 4200}`,
    waitforTimeout: 10000,
    connectionRetryTimeout: 90000,
    connectionRetryCount: 3,
    services: ['chromedriver'],
    framework: 'jasmine',
    jasmineNodeOpts: {
        requires: ['ts-node/register'],
        defaultTimeoutInterval: 60000,
        expectationResultHandler: function(passed, assertion) {
            // do something
        }
    },
}

- Jur_

---

你必须明确指定要使用哪个tsconfig，否则将使用默认的tsconfig。 - Mike G.

@MikeG。感谢您的回答，这听起来可能是出了问题的原因。我目前按照建议在TS_NODE_PROJECT环境变量中设置了配置文件。有没有其他指定要使用哪个配置文件的替代方法？（我已经在问题中添加了额外的信息）。 - Jur_

尝试以编程方式传递参数，而非使用环境变量。 - Mike G.

谢谢。我感觉我们越来越接近了：当我运行 tsc --project ./e2e/tsconfig.e2e.json 时，它确实可以编译而不出错（与仅运行 tsc 相反）。然而，当我运行我的 e2e 测试时，无论是使用 ng e2e 还是 npx wdio ./e2e/wdio.conf.js，它仍然会出现编译错误。所以我猜想我需要让 webdriver 配置也使用正确的 tsconfig。 - Jur_

很难说。你使用了类型化配置吗？你在配置中如何配置 ts node？ - Mike G.

我已经在jasmineNodeOpts中设置了requires: ['ts-node/register']。我也会将webdriverio配置添加到问题中。 - Jur_

Answer 1

您可以在wdio.conf文件中运行tsnode。 在您的jasmine选项中，应该使用tsconfig-paths代替：

const tsNode = require('ts-node');
tsNode.register({
  files: true,
  project: './e2e/tsconfig.e2e.json'
});

exports.config = {
....
    jasmineNodeOpts: {
        // Required for Typescript
        requires: ['tsconfig-paths/register'],
...
};

- Schiavini

---

谢谢，这让我的端到端测试编译和运行了！ - Jur_