CucumberJS+Vue3+PlayWright组件测试：.vue文件扩展名未知错误

解决.vue文件导入扩展名错误 #

Node.js的ESM模式默认不识别.vue文件扩展名，需要借助构建工具让CucumberJS能解析这类文件，两种可行方案：

方案1：用esbuild-register处理文件转换 #

1. 安装依赖：

npm install esbuild esbuild-register esbuild-plugin-vue3 --save-dev

2. 创建注册脚本register.js：

require('esbuild-register/dist/node').register({
  plugins: [require('esbuild-plugin-vue3')()]
});

3. 修改Cucumber运行命令，指定注册脚本：

cucumber-js --require-module ./register.js --require ./features/step-definitions/**/*.mjs

方案2：用vite-node加载步骤定义 #

vite-node可以直接处理Vue和ESM文件，无需额外注册脚本：

1. 安装依赖：

npm install vite vite-node @vitejs/plugin-vue --save-dev

2. 在package.json中添加测试脚本：

{
  "scripts": {
    "test:bdd": "vite-node node_modules/@cucumber/cucumber/bin/cucumber-js --require ./features/step-definitions/**/*.mjs"
  }
}

在步骤定义中获取PlayWright的mount函数 #

直接从@playwright/test导入mount，并结合Cucumber的World对象共享组件实例：

示例步骤定义（.mjs格式）： #

import { test, mount } from '@playwright/test';
import HelloWorld from '../../src/components/HelloWorld.vue';

Given('加载HelloWorld组件', async function () {
  this.component = await mount(HelloWorld, {
    props: {
      msg: 'Hello BDD'
    }
  });
});

Then('组件显示正确文本', async function () {
  await test.expect(this.component.locator('h1')).toHaveText('Hello BDD');
});

关键配置检查 #

1. 确保package.json启用ESM：

{
  "type": "module"
}

2. 在playwright.config.js中启用组件测试：

export default {
  use: {
    components: { default: 'vue' }
  }
};

内容的提问来源于stack exchange，提问作者Murrah