用打字稿正确使用黄瓜？

Question

我正在关注一个教程，但设置真的很糟糕。 基本上它使用 typescript 将 .ts 文件转换为 .js。 所以基本上用 .js 文件污染了你的整个源代码。

因此，一旦您从源代码导入 .ts 文件，所有依赖项都会与 .js 文件重复。

你知道如何进行正确的打字稿黄瓜测试吗？

一个 hacky 解决方案：将所有功能和所有文件复制到另一个临时文件夹，从那里运行。 我希望黄瓜比这更成熟一些，因此我的问题在这里？

或者更改 cucumber 的配置以从 ts 中查看 build 文件夹。

谢谢

为什么只使用打字稿不起作用：

代码结构：

• 测试
  • 一个特征
  • 步骤定义.ts

现在您将编译打字稿并具有以下结构：

• 测试
  • 一个特征
  • 步骤定义.ts
• 建造
  • 测试
    • stepDefinitions.js

现在您可以看到stepDefinitions.js不知道在哪里可以找到a.feature 。 如果您在 build/test 文件夹上运行 cucumber，它将找不到要运行的任何步骤功能......因为它们位于 tests 文件夹中。 所以修复它的黑客方法是复制功能文件，从而产生这种结构：

• 测试
  • 一个特征
  • 步骤定义.ts
• 建造
  • 测试
    • 一个特征
    • stepDefinitions.js

现在它可以工作了，但是很hacky，我不喜欢它。

Answer 1

正如 Raymond Kelly 所建议的，您不需要使用tsc编译代码，然后在编译后的文件上运行 cucumber。 您可以使用--require-module ts-node/register使用 typescript transpiler 运行 cucumber。 完整示例由cucumber-ts-starter上的 hdorgeval 提供

编辑：使用新版本cucumber7-ts-starter改进了提到的原始模板

Answer 2

根据提供的更多信息更新答案：

您应该做的第一件事是将您的功能和步骤分开到它们自己的文件夹中

 tests
  features
    a.feature
    b.feature
  stepDefinitions
    aStep.ts

接下来，创建一个 cucumber.js 文件，该文件将作为黄瓜配置文件。 我使用以下配置文件，但你想做什么取决于你

    var common = [
  `--format ${
    process.env.CI || !process.stdout.isTTY ? 'progress' : 'progress-bar'
    }`,
  '--format json:./reports/cucumber-json-reports/report.json',
  '--format rerun:@rerun.txt',
  '--format usage:usage.txt',
  '--parallel 20',
  '--require ./build/tests/stepDefinitions/**/*.js',
  '--require ./build/tests/stepDefinitions/*.js',
  '--require ./build/tests/support/*.js'
].join(' ');

module.exports = {
  default: common,
};

以上告诉黄瓜你的步骤在哪里。 现在您可以从项目的根目录运行类似以下的内容

tsc && ./node_modules/.bin/cucumber-js ./tests/features/ -p default

这将

1. 编译你的代码
2. 运行 cucumber-js 库
3. 对 features 文件夹运行 cucumber-js
4. 使用您在 cucumber.js 文件中构建的默认配置文件对 features 文件夹运行 cucumber-js

编辑：请参阅https://stackoverflow.com/a/55378059/3323395了解如何执行此操作而无需先编译

Answer 3

将黄瓜测试放入 src 并使用tsc编译它并不是一个非常好的做法，因为它会污染软件运行不需要的build目录，尤其是在生产中。

相反，可以使用ts-node 。 运行npm install ts-node --save-dev 。 这是cucumber-js配置文件的示例（所有.feature和步骤定义文件都在我的设置中的/features文件夹中）：

module.exports = {
  default: [
    '--require-module ts-node/register',
    '--require ./features/**/*.ts',
    '--require ./features/*.ts',
  ].join(' '),
};

Answer 4

我没有关注你的问题？ Cucumber 与将 .ts 文件编译为 .js 文件无关，这是 typescript 做的。 如果您不希望 .ts 和 .js 文件位于同一文件夹中，则可以将以下内容添加到 tsconfig.json 文件中。

"outDir": "typeScript"

这会将 javascript 文件输出到项目根目录下的文件夹“typeScript”。 我个人喜欢将它们放在一起，因为这样更容易调试。 没有办法摆脱正在创建的 .js 文件，因为它们是运行 javascript 时使用的文件。

Answer 5

您还可以使用ts-node模块来编译您的黄瓜steps.ts文件，因此您不需要generate.js文件

例如

./node_modules/.bin/cucumber-js features --require step-definitions/*.ts  --require-module ts-node/register --format node_modules/cucumber-pretty"