TypeScript 模块解析不适用于 Cucumber-js答案

【问题标题】：TypeScript Module Resolution doesn't quite work with Cucumber-jsTypeScript 模块解析不适用于 Cucumber-js
【发布时间】：2019-12-12 02:08:02
【问题描述】：

我正在为 Cucumber-js 做一个小的概念证明——使用 TypeScript。到目前为止一切都很好......但我找不到在使用tsconfig-paths时正确配置模块分辨率的方法。

这是my project 结构：

.
├── cucumber.js
├── features
│   └── bank-account.feature
├── package.json
├── package-lock.json
├── step-definitions
│   └── bank-account.steps.ts
├── support
│   └── model
│       └── bank-account.model.ts
├── tsconfig.json
└── tslint.json

我使用的是cucumber-tsflow，所以“步骤定义”看起来像：

// import { BankAccount } from "@model/bank-account.model"; // ...trouble!
import { BankAccount } from "../support/model/bank-account.model";

import { expect } from "chai";
import { binding, given, then, when } from "cucumber-tsflow";

@binding()
export class BankAccountSteps {
  ...

  @when("{int} is deposited")
  public when(amount: number) {
    this.account.deposit(amount);
  }

  ...
}

...但我无法使用@model/bank-account.model，即使我在tsconfig.json 和cucumber.js 中正确配置了它：

# file: tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    ...
    "paths": {
      "*": ["./*"],
      "@model/*": ["./support/model/*"]
    },
    ...
    "types": [
      "@types/chai",
      "@types/cucumber",
      "node"
    ]
  },
  "exclude": ["node_modules/"],
  "include": ["./step-definitions/**/*", "./support/**/*"]
}

# file: cucumber.js
const common = [
  "features/**/*.feature",
  "--require-module ts-node/register",
  // "--require-module tsconfig-paths/register",
  "--require step-definitions/**/*.ts",
  "--require support/**/*.ts"
].join(" ");

module.exports = {
  default: common,
};

只要我“激活”tsconfig-paths – 阅读：在cucumber.js 内取消注释"--require-module tsconfig-paths/register"，我就会收到以下错误消息：

$ npm run test

> cucumber-js --profile default

TypeError: cucumber_1.Before is not a function
    at _.once (/home/x80486/Workshop/Development/cucumber-basics/node_modules/cucumber-tsflow/src/binding-decorator.ts:78:3)
    at /home/x80486/Workshop/Development/cucumber-basics/node_modules/underscore/underscore.js:957:21
    at /home/x80486/Workshop/Development/cucumber-basics/node_modules/cucumber-tsflow/src/binding-decorator.ts:38:5
    at __decorate (/home/x80486/Workshop/Development/cucumber-basics/step-definitions/bank-account.steps.ts:5:95)
    at Object.<anonymous> (/home/x80486/Workshop/Development/cucumber-basics/step-definitions/bank-account.steps.ts:8:30)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Module.m._compile (/home/x80486/Workshop/Development/cucumber-basics/node_modules/ts-node/src/index.ts:473:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Object.require.extensions.(anonymous function) [as .ts] (/home/x80486/Workshop/Development/cucumber-basics/node_modules/ts-node/src/index.ts:476:12)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at supportCodePaths.forEach.codePath (/home/x80486/Workshop/Development/cucumber-basics/node_modules/cucumber/lib/cli/index.js:142:42)
    at Array.forEach (<anonymous>)

任何精通 TypeScript 和/或 Cucumber 的人都可以了解这里发生了什么？

更新

如果我删除 cucumber.js 并仅传递 npm 脚本 ("test": "cucumber-js features/**/*.feature --require-module ts-node/register --require-module tsconfig-paths/register --require step-definitions/**/*.ts --require support/**/*.ts") 中的所有选项，它就可以工作：令人兴奋：

此外，将baseUrl 更改为"./" 以外的其他内容，例如"./support"，而不删除cucumber.js 也可以解决问题。

【问题讨论】：

感谢您分享更新！我有同样的问题，因为我使用路径别名

标签： typescript cucumber cucumberjs

【解决方案1】：

我看到的第一件事是在您的黄瓜配置文件中，您引用的是 ts 文件，而不是我相信 cucumber-js 寻找的已编译打字稿。试试：

const common = [
  "features/**/*.feature",
  "--require-module ts-node/register",
  // "--require-module tsconfig-paths/register",
  "--require step-definitions/**/*.js",
  "--require support/**/*.js"
].join(" ");

另外，我不认为这是一个问题，但我总是将文件类型添加到 tsconfig 文件中包含的末尾。

我一直在计划将一个带有 typescript 的示例 cucumber-js 项目放到 github 上供人们使用，所以也许这就是我需要的动机 :)

【讨论】：

感谢您的提示，但这会使所有场景都失败，因为它不会识别出任何声明的内容。这一行：--require-module ts-node/register 为 TypeScript 提供了诀窍；它会即时转换——类似于 Jest 所做的。此配置没有 ECMAScript 输出。

【解决方案2】：

并不是真正解决此问题的答案，但目前正在使用 @cucumber/cucumber 版本 7.x — 并且可能该更改已向后移植到以前的稳定版本。

Here 是一个工作（类似模板的项目）来测试它。

【讨论】：