Cucumber with playwright 无法识别 ES2022 模块配置中的 .TS 文件

Question

我正在尝试以这种方式通过剧作家测试来实现黄瓜：

• 有一个 cucumber.cjs 文件，它将成为我的跑步者
• 有测试 > 验收 > 功能 > {这里是所有 .features 文件}
• 有测试 > step_definitions > 这里是所有带有 custom-world.ts 和常见 hooks.ts 文件的 .steps.ts 文件。

这里是参考说明https://www.genui.com/resources/getting-started-with-bdd-using-cucumber-io

common-hooks.ts

import { ICustomWorld } from "./custom-world";
import {
    ChromiumBrowser,
    chromium
} from '@playwright/test'
import { After, AfterAll, Before, BeforeAll } from '@cucumber/cucumber'
let browser: ChromiumBrowser

BeforeAll(async function() {
    browser = await chromium.launch({ headless: false, channel: "chrome" })
  });
  
Before(async function(this: ICustomWorld) {
  this.context = await browser.newContext()
  this.page = await this.context.newPage()
});

After(async function(this: ICustomWorld) {
  await this.page?.close()
  await this.context?.close()
});
  
AfterAll(async function() {
  await browser.close()
});

自定义世界.ts

import { IWorldOptions, World, setWorldConstructor } from '@cucumber/cucumber'
import { BrowserContext, Page } from '@playwright/test'

export interface ICustomWorld extends World {
    context?: BrowserContext
    page?: Page
}

export class CustomWorld extends World implements ICustomWorld {
    constructor(options: IWorldOptions) {
        super(options)
    }
}

setWorldConstructor(CustomWorld)

simple_counter.steps.ts

import { Given, When, Then } from '@cucumber/cucumber'
import { expect } from '@playwright/test'
import { ICustomWorld } from './custom-world'

Given('User visits homepage', async function (this: ICustomWorld) {
    const page = this.page!
    await page.goto('localhost:3000')
})

When('User clicks the + button', async function (this: ICustomWorld) {
    const page = this.page!
    const plusButton = await page.locator('[data-testid="increase"]')
    await expect(plusButton).toBeVisible()
    await plusButton.click()
})

Then('User sees the counter get increased', async function (this: ICustomWorld) {
    const page = this.page!
    const counterText = await page.locator('[data-testid="counter-text"]')
    await expect(counterText).toHaveText('Count: 1')
  })

黄瓜.cjs

const config = {
    paths: ['tests/acceptance/features/**/*.feature'],
    require: ['tests/acceptance/step_definitions/**/*.ts'],
    requireModule: ['ts-node/register'],
    format: [
      'summary',
      'progress-bar',
    ],
    formatOptions: { snippetInterface: 'async-await' },
    publishQuiet: true,
  };

module.exports = {
   default: config
 }

我不想更改 tsconfig 文件中的模块和目标。我用这个：

    "target": "ES2022",
    "module": "ES2022",

我收到以下错误消息

Cucumber expected a CommonJS module at 'C:\Users\User\source\repos\my-application\tests\acceptance\step_definitions\common-hooks.ts' but found an ES module. Either change the file to CommonJS syntax or use the --import directive instead of --require.

和完整消息

Original error message: Must use import to load ES Module: C:\Users\User\source\repos\myApp\tests\acceptance\step_definitions\common-hooks.ts require() of ES modules is not supported. require() of C:\Users\User\source\repos\myApp\tests\acceptance\step_definitions\common-hooks.ts from C:\Users\User\source\repos\myApp\node_modules\@cucumber\cucumber\lib\try_require.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules. Instead change the requiring code to use import(), or remove "type": "module" from C:\Users\User\source\repos\myApp\package.json.

Answer 1

我觉得我不完全理解什么对我有用，但以下是行动：

• 将

  require

  中的

  cucumber.cjs

  重命名为

  import

  。
• 从那里删除

  requireModule

  。
• 将

  test

  中的

  package.json

  脚本从

  cucumber-js test

  更改为

  cross-env NODE_OPTIONS='--loader ts-node/esm' cucumber-js

  。