Unable to import SVGs while rendering React component with Cucumber.js

Question

I have a project created with typescript, react-scripts and want to test it with Gherki, Cucumber and ts-node. To render React-Components in Cucumber I use the react testing library @testing-library/react.

In several components I import SVGs like import { ReactComponent as Svg } from "../assets/icons/svgIcon.svg";.

When I render a component which imports a SVG I get the following error and stacktrace

/path/to/project/src/assets/icons/add.svg:1

^

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. [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. (/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. [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)

My tsconfig.json looks like

{
  "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"
  ]
}

The cucumber.js config file is looking

/* 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
  }

And the test/tests.setup.js looks like

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

I also tried to require react-scripts as well as using the react-script types in the cucumber configuration but this doesn't work.

How can I achieve to run the test with cucumber? Is there a way either use the file loaders or mock the svg import calls?

Unable to import SVGs while rendering React component with Cucumber.js

0 Answers