CucumberJS 与 Vue 3 和 PlayWright：类型错误 [ERR_UNKNOWN_FILE_EXTENSION]：未知的文件扩展名“.vue”

Question

我可以使用 PlayWright 实验组件测试来测试我的 HelloWorld.vue 组件。这有效：

import { test, expect } from '@playwright/experimental-ct-vue';
import HelloWorld from './HelloWorld.vue';

test.use({ viewport: { width: 500, height: 500 } });

test('should work', async ({ mount }) => {
  const component = await mount(HelloWorld, {
    props: {
      msg: 'You did it!'
    }
  });

  await expect(component).toContainText('Vite + Vue');
});

但现在我想将 CucumberJS 添加到堆栈中。由于 Vue 应用程序使用 ESM 模块，我的步骤定义文件是一个

mjs

文件，因此我可以使用“导入”而不是“需要”。

问题是我在导入组件时得到了

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".vue"

。

cmp-helloworld.mjs：

import { Given, When, Then } from '@cucumber/cucumber';
import { test, expect } from '@playwright/experimental-ct-vue';

import HelloWorld from '../../components/HelloWorld.vue'; // <== Throws the error

let component;

When('I mount the component with the message {string}', async function (message) {
  component = await mount(HelloWorld, {
    props: {
      msg: message
    }
  });
});

// Then ...

请问我该怎么做有什么想法吗？如果我不能将 BDD 与 PlayWright 组件测试一起使用，那就太糟糕了。

而且...如果我解决了导入问题，是的，我将需要从某个地方获取

mount

函数。但这是下一个障碍。有人实现过这个组合吗？

编辑：共享package.json

{
  "name": "myappct",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test:unit": "vitest",
    "test:e2e": "playwright test -c playwright-e2e.conf.js",
    "test-ct": "playwright test -c playwright-ct.config.js",
    "pretest": "node ./src/test/helpers/init.mjs",
    "test": "cross-env TEST_PROFILE=test cucumber-js --config src/test/config/cucumber.mjs || true",
    "posttest": "node cucumber-html-report.js",
    "test:failed": "cucumber-js -p rerun @rerun.txt"
  },
  "dependencies": {
    "@dotenvx/dotenvx": "^1.5.0",
    "vue": "^3.4.29"
  },
  "devDependencies": {
    "@cucumber/cucumber": "^10.8.0",
    "@playwright/experimental-ct-vue": "^1.45.1",
    "@playwright/test": "^1.45.1",
    "@types/node": "^20.14.10",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/test-utils": "^2.4.6",
    "cross-env": "^7.0.3",
    "fs-extra": "^11.2.0",
    "jsdom": "^24.1.0",
    "multiple-cucumber-html-reporter": "^3.6.2",
    "vite": "^5.3.1",
    "vite-plugin-vue-devtools": "^7.3.1",
    "vitest": "^1.6.0"
  }
}

为了完整起见，这里是 PlayWright + Cucumber (JS) e2e 测试的工作示例。我希望能够通过组件测试实现类似的目标。

import { Given, When, Then, setDefaultTimeout } from '@cucumber/cucumber';
import { test, expect, chromium } from '@playwright/test';

// Global browser and page state for scenarios
let browser;
let page;

Given('I am on the Playwright website', async function () {
  browser = await chromium.launch({ headless: true });
  page = await browser.newPage();
  await page.goto('https://playwright.dev/');
});

Then('the page title should be {string}', async function (title) {
  // Turn the string into a regular expression
  const re = new RegExp(title);
  await expect(page).toHaveTitle(re);
  await browser.close();
});

When('I click on the {string} link', async function (linkText) {
  // Click the get started link.
  await page.getByRole('link', { name: linkText }).click();
});

Then('I should be redirected to the {string} page', async function (pageName) {
  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: pageName })).toBeVisible();
  await browser.close();
});

Answer 1

经过大量的测试和头发拉扯，我发现目前还无法使用 CucumberJS 来测试 Vue 组件。 PlayWright + CucumberJS 适合 Vue e2e 测试，但不适用于组件测试。

原因之一是模块系统存在根本冲突。虽然 CucumberJS 现在确实支持 ES 模块，但 Vue 正在使用 Vite 进行转译（无论您使用 CommonJS 还是将“type”：“module”添加到 package.json 来获取 ESM）。因此，当 Cucumber 步骤文件遇到如下导入时：

import HelloWorld from '../../components/HelloWorld.vue';

它期望 ESM 导入，但事实并非如此。 Vue 可以通过 Vite 处理这种“导入”，但 Cucumber 不能，因此即使它确实成功导入了该文件，它也不知道如何处理该文件。

我使用 Vitest 和 Vitest-cucumber 进行 Vue / Quasar 组件测试，效果很好。 Vitest-cucumber 不是 CucumberJS 实现 - 它是 Gherkin 的部分实现，通过 Give、When、Then 函数等围绕“描述/它”进行包装函数。但至少我可以编写 Gherkin 功能文件以获得比单元更好的文档测试。

如果您想将其用于 Quasar，另请参阅：此处

:-)