使用 Cucumber.js

编程问答 2022-05-24

问题描述

我有一个用 typescript、react-scripts 创建的项目，想用 Gherki、Cucumber 和 ts-node 测试它。为了在 Cucumber 中呈现 React-Components，我使用了 React 测试库 @testing-library/react。

在几个组件中，我导入了 SVG，例如 import { ReactComponent as Svg } from "../assets/icons/svgIcon.svg";。

当我渲染一个导入 SVG 的组件时，我收到以下错误和堆栈跟踪

/path/to/project/src/assets/icons/add.svg:1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">...</svg>
^

SyntaxError: Unexpected token '<'
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Object.require.extensions.<computed> [as .js] (/path/to/project/node_modules/ts-node/src/index.ts:1045:43)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/path/to/project/src/components/Icon.tsx:2:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Module.m._compile (/path/to/project/node_modules/ts-node/src/index.ts:1056:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Object.require.extensions.<computed> [as .tsx] (/path/to/project/node_modules/ts-node/src/index.ts:1059:12)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)

我的tsconfig.json看起来像

{
  "compilerOptions": {
    "target": "es5","lib": [
      "dom","dom.iterable","esnext"
    ],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx"
  },"include": [
    "src"
  ]
}

正在查找 cucumber.js 配置文件

/* eslint-disable @typescript-eslint/no-var-requires,import/no-unused-modules,no-undef */
const cliFormat = `${process.env.CI || !process.stdout.isTTY ? 'progress' : 'progress-bar'}`
const common = [
    'test/features/**/*.feature',// Specify our feature files
    '--require-module jsdom-global/register',// 
    '--require test/tests.setup.js',// Load TypeScript module
    '--require test/support/**/*.ts',// Load step definitions
    '--require test/steps/**/*.tsx',// Load step definitions
    `--format ${cliFormat}`,// Load custom formatter
    '--format @cucumber/pretty-formatter',// Load custom formatter
  ].join(' ');
  
  module.exports = {
      default: common
  }

test/tests.setup.js 看起来像

const tsConfig = require('../tsconfig.json')
require('ts-node').register({
    transpileOnly: true,compilerOptions: {
        ...tsConfig.compilerOptions,"target": "esnext","module": "commonjs","typeRoots": [
            "node_modules/@types"
        ]
    }
});

我还尝试要求 react-scripts 以及在 Cucumber 配置中使用 react-script 类型，但这不起作用。

我怎样才能实现用黄瓜运行测试？有没有办法使用文件加载器或模拟 svg 导入调用？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cucumberreact-scriptsreactjsreactjssvg