Cypress setup with javascript

# install following devDependencies
npm i cypress --save-dev
npm i -D cypress-file-upload
npm i -D @cypress/code-coverage
npm i -D @cypress/instrument-cra
npm i -D eslint-plugin-cypress
npm i -D @bahmutov/cypress-esbuild-preprocessor
npm i -D junit-report-merger
npm i -D @testing-library/cypress


# in package.json
"scripts": {
    ...,
    "cypress:open": "cypress open",
    "cypress:run": "rm -rf \"cypress/results\" && cypress run --browser chrome --headed",
    "start:instrument": "react-scripts -r @cypress/instrument-cra start"
}

"eslintConfig": {
    "extends": [
      ...,
      "plugin:cypress/recommended"
    ]
  }


# in cypress.config.js
const { defineConfig } = require("cypress");
const codeCoverage = require("@cypress/code-coverage/task");
const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");

module.exports = defineConfig({
  video: false,
  projectId: "18r2ko",
  viewportWidth: 1280,
  viewportHeight: 800,
  experimentalStudio: true,
  screenshotOnRunFailure: true,
  watchForFileChanges: false,
  retries: {
    runMode: 2,
    openMode: 1,
  },
  trashAssetsBeforeRuns: true,
  defaultCommandTimeout: 10000,
  pageLoadTimeout: 120000,
  reporter: "junit",
  reporterOptions: {
    mochaFile: "cypress/results/cypress-output-[hash].xml",
    toConsole: true,
  },
  e2e: {
    // We've imported your old cypress plugins here.
    // You may want to clean this up later by importing these.
    setupNodeEvents(on, config) {
      codeCoverage(on, config);
      createBundler(on, config);
      return config;
    },

    baseUrl: "http://localhost: 3000",
    specPattern: "src//**/*-test/*cypress.js",
  },
});

# create a file jsconfig.json root directory of project  add below lines
{
  "include": ["node_modules/cypress", "./cypress/**/*.js"]
}

# in cypress/support/commands.js add below line
import '@testing-library/cypress/add-commands'


# in cypress/support/e2e.js add below line
import '@cypress/code-coverage/support'


# to get coverage for specific folder coverage
npm run start:instrument
npm run cypress:run -- --spec src/integration-test/**.js


# For coverage files in package.json
"nyc": {
   "include": ["src//**/*-test/*cypress.js"],
   "exclude": ["src/reportWebVitals.js"]
}