webpack Cypress测试-在打字脚本中运行Cypress测试时,Cucumber功能文件显示错误“您可能需要适当的加载程序来处理此文件”

eoigrqb6  于 2023-03-18  发布在  Webpack
关注(0)|答案(3)|浏览(147)

我正在运行一个 cucumber 功能文件在柏树亚军。

  • 数据库功能 *
Feature: DB

    Scenario: db test
        When i try to connect to db
        Then i get the code

我的步骤定义如下

  • 数据库.ts*
import { Given, When, Then, Before } from "cypress-cucumber-preprocessor/steps";

When(/^i try to connect to db$/, () => {
  cy.task('log', 'This is the config task')

});

Then(/^i get the code$/, () => {
    return true;
});

我的 index.js 文件在plugins文件夹下

const browserify = require('@cypress/browserify-preprocessor');
const cucumber = require('cypress-cucumber-preprocessor').default;

module.exports = (on, config) => {
  const options = {
    ...browserify.defaultOptions,
    typescript: require.resolve('typescript'),
  };

  on('file:preprocessor', cucumber(options));
};

module.exports = (on, config) => {
  on('task', {
    log(message) {
      console.log(message)

      return null
    },
  })
}

我遇到过一些使用webpack-preprocessor的解决方案,但我没有使用webpack-preprocessor,而是使用browserify-preprocessor和typescript(我也尝试过webpack-preprocessor,但没有效果)。
当我在cypress runner中运行这个程序时,我得到了以下错误x1c 0d1x
当我从index.js文件中删除配置任务log,并注解掉db.ts文件中的cy.task调用时,代码工作顺利。只有当我在index.js文件中添加配置任务时,我才得到以下错误。

Error: Webpack Compilation Error
./cypress/integration/db.feature 3:17
Module parse failed: Unexpected token (3:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| Feature: DB
| 
>     Scenario: db test
|         When i try to connect to db
|         Then i get the code
    at Watching.handle [as handler] (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\packages\server\node_modules\@cypress\webpack-preprocessor\dist\index.js:180:23)
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\tapable\lib\Hook.js:154:20)
    at Watching._done (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Watching.js:98:28)
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Watching.js:73:19
    at Compiler.emitRecords (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:499:39)
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Watching.js:54:20
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:482:27
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\neo-async\async.js:2818:7
    at done (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\neo-async\async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:464:33
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\graceful-fs\graceful-fs.js:143:16
    at C:\Users\visha\AppData\Local\Cypress\Cache\9.5.3\Cypress\resources\app\node_modules\graceful-fs\graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:188:23)

这是我的包. json

"cypress-cucumber-preprocessor": {
    "cucumberJson": {
      "generate": true,
      "outputFolder": "cypress/cucumber-json",
      "filePrefix": "",
      "fileSuffix": ".cucumber",
      "nonGlobalStepDefinitions": false,
      "nonGlobalStepBaseDir": "cypress/support/step_definitions"
    }
  },
  "dependencies": {
    "cosmiconfig": "^7.0.1"
  },
  "devDependencies": {
    "@cypress/browserify-preprocessor": "^3.0.2",
    "@cypress/webpack-preprocessor": "^5.11.1",
    "@types/cypress-cucumber-preprocessor": "^4.0.1",
    "cypress": "^9.5.3",
    "cypress-cucumber-preprocessor": "^4.3.1",
    "typescript": "^4.6.3"
  }
a0zr77ik

a0zr77ik1#

我也遇到过同样的问题,但在我的例子中,解决方案是将plugin/index.js的内容从cypress.config.ts文件传递到setupNodeEvents
我使用的是cypress10.0.0版本,根据官方文档,插件文件被弃用。

e2e: {
    setupNodeEvents(on, config) {
      const cucumber = require('cypress-cucumber-preprocessor').default
      const browserify = require('@cypress/browserify-preprocessor');
      const options = {
        ...browserify.defaultOptions,
        typescript: require.resolve('typescript'),
      };
      on('file:preprocessor', cucumber(options));
    },
   ...
  }
toe95027

toe950272#

修复方法是将自定义任务放在与browserify相同的modul.export下。index.js文件中有两个不同的modul.export会导致问题。
这是我最后的index.js文件

const browserify = require('@cypress/browserify-preprocessor');
const cucumber = require('cypress-cucumber-preprocessor').default;

module.exports = (on, config) => {
  const options = {
    ...browserify.defaultOptions,
    typescript: require.resolve('typescript'),
  };

  on('file:preprocessor', cucumber(options));
  on('task', {
    log(message) {
      console.log(message)

      return null
    },
  })
};
5ssjco0h

5ssjco0h3#

你需要browserify来运行 cucumber 测试。
在cypress.config.js文件中添加以下代码

const { defineConfig } = require("cypress");
const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
const browserify = require("@badeball/cypress-cucumber-preprocessor/browserify");

async function setupNodeEvents(on, config) {
  // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
  await preprocessor.addCucumberPreprocessorPlugin(on, config);

  on("file:preprocessor", browserify.default(config));

  // Make sure to return the config object as it might have been modified by the plugin.
  return config;
}

module.exports = defineConfig({
  e2e: {
    specPattern: "**/*.feature",
    setupNodeEvents,
  },
});

在package.json中添加以下依赖项

"@cypress/browserify-preprocessor": "latest"

在步骤中添加此行

import { Given, When, Then } from "@badeball/cypress-cucumber-preprocessor";

使用npm i再次安装依赖项
执行你的测试它会成功的!

相关问题