Running test on .feature file in VSCode returning odd characters in terminal

Question

I am currently testing a few features for an app and going through the BDD acceptance testing process at the moment. My questions is aiming to receive for an explanation rather than an answer.

I have written my scenarios using the GWT syntax in a .feature file. Then I created the test file for this .feature file and ran a test on it while it contained an empty defineFeature() function in order to receive the code for my tests from Cucumber in the terminal.

Now, in the code that has been returned to me in the terminal I get some odd characters. In this case those characters represent a number from the .feature file. I added two screenshots for reference.

I don`t have any Gherkin related extensions installed and have also checked all my setting but nothing is related to this syntax. My currenty workaround is to simply rephrase the GWT so that I receive plain letter characters only.

Here is my package.json:

{
  "name": "app name",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://example.com",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "nprogress": "^0.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "workbox-background-sync": "^6.5.3",
    "workbox-broadcast-update": "^6.5.3",
    "workbox-cacheable-response": "^6.5.3",
    "workbox-core": "^6.5.3",
    "workbox-expiration": "^6.5.3",
    "workbox-google-analytics": "^6.5.3",
    "workbox-navigation-preload": "^6.5.3",
    "workbox-precaching": "^6.5.3",
    "workbox-range-requests": "^6.5.3",
    "workbox-routing": "^6.5.3",
    "workbox-strategies": "^6.5.3",
    "workbox-streams": "^6.5.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
    "enzyme": "^3.11.0",
    "gh-pages": "^4.0.0",
    "jest-cucumber": "^3.0.1",
    "puppeteer": "^14.4.1"
  }
}

What might be the reason for this syntax?

Answer 1

Cucumber is suggesting how to write the method signatures for step definitions to match what is in your scenario.

It is using regex's.

• /^ is the regex for the beginning of a line
• $/ is the regex for the end of a line
• (\d+) is a regex to capture a number and that number will be passed into arg0

You don't have to follow cucumbers recommendation, its just trying to be helpful.

You probably need to read the cucumber docs a bit more and also learn about regex's.