cypress: Cy.visit from a component spec is not allowed and code coverage broken. Happening in integration tests suitcase.

Current behavior

I did follow all the Migrating to Cypress 7.0 walkthrough from version 6.40. My project uses as well the component unit test react library for the experimental feature in previous major versions and was running fine.

After some issues with the Webpack configuration (solved by installing the @cypress Webpack dependencies), I’m having the issue when running any of my integration test suite cases that execute the cy.visit command defined in the beforeEach hook.

As a matter of fact, the code coverage is broken. Used to work before the version change and also followed the Code coverage guide and the instrumentation steps with babel plugin.

Desired behavior

End to end testing and component unit testing run smoothly and code coverage generate report.

Test code to reproduce

// src/scripts/cypress.js

const cypress = require('cypress');
const marge = require('mochawesome-report-generator');
const { merge } = require('mochawesome-merge');
require('mochawesome');

cypress.run({ reporter: 'mochawesome' }).then(
    () => {
        generateReport();
    },
    (error) => {
        generateReport();
        console.error(error);
        process.exit(1);
    }
);

function generateReport(options) {
    return merge({
        files: ['./mochawesome-report/*.json']
    }).then((report) => marge.create(report, { saveJson: true }));
}

cypress.json

{
    "projectId": "my-project",
    "baseUrl": "https://localhost:3000/",
    "chromeWebSecurity": false,
    "component": {
        "componentFolder": "src",
        "testFiles": "**/*cy.spec.js"
    },
    "video": false,
    "reporterOptions": { "overwrite": false },
    "retries": {
        "runMode": 2,
        "openMode": 1
    }
}

package.json

...
{
    "name": "my-project",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@cypress/code-coverage": "^3.9.5",
        "@loadable/component": "^5.14.1",
        "@material-ui/core": "^4.11.3",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/lab": "^4.0.0-alpha.57",
        "@okta/okta-auth-js": "^4.2.0",
        "@okta/okta-react": "^4.0.0",
        "@redux-offline/redux-offline": "^2.6.0",
        "@reduxjs/toolkit": "^1.4.0",
        "@testing-library/jest-dom": "^5.11.5",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "big.js": "^6.0.3",
        "history": "^5.0.0",
        "immer": "^9.0.1",
        "notistack": "^1.0.7",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-dropzone": "^11.2.2",
        "react-icons": "^3.11.0",
        "react-number-format": "^4.4.1",
        "react-redux": "^7.2.2",
        "react-router-dom": "^5.2.0",
        "react-scripts": "^4.0.3",
        "react-table": "^7.6.1",
        "redux": "^4.0.5",
        "redux-dynamic-modules-core": "^5.2.3",
        "redux-dynamic-modules-react": "^5.2.3",
        "redux-dynamic-modules-saga": "^5.2.3",
        "redux-logger": "^3.0.6",
        "redux-saga": "^1.1.3",
        "uuid": "^8.3.1",
        "whatwg-fetch": "^3.4.1"
    },
    "scripts": {
        "start": "npm-run-all buildconf startdev",
        "buildconf": "npm run build:env",
        "startdev": "HTTPS=true PORT=3000 react-scripts -r @cypress/instrument-cra start",
        "ci:start": "npm run build:env && HTTPS=true PORT=3030 react-scripts start",
        "cy:run": "node scripts/cypress.js",
        "cy:ci": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test start https-get://localhost:3030 cy:run",
        "build:env": "node scripts/set-env.js DIR='./public'",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "clean": "prettier --write .",
        "e2e": "node_modules/.bin/cypress open --browser chrome"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "eslint:recommended",
            "plugin:react/recommended",
            "plugin:cypress/recommended"
        ]
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@cypress/instrument-cra": "^1.4.0",
        "cypress": "^6.9.1",
        "cypress-file-upload": "^5.0.7",
        "cypress-pipe": "^2.0.0",
        "cypress-react-unit-test": "^4.17.0",
        "dotenv": "^8.2.0",
        "eslint-plugin-cypress": "^2.11.3",
        "eslint-plugin-react": "^7.23.2",
        "istanbul-lib-coverage": "^3.0.0",
        "lint-staged": "^10.5.0",
        "mocha": "^8.4.0",
        "mochawesome": "^6.2.2",
        "mochawesome-merge": "^4.2.0",
        "mochawesome-report-generator": "^5.2.0",
        "npm-run-all": "^4.1.5",
        "nyc": "^15.1.0",
        "prettier": "^2.1.2",
        "start-server-and-test": "^1.11.7"
    },
    "lint-staged": {
        "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
            "prettier --write"
        ]
    },
    "browser": {
        "fs": false
    },
    "nyc": {
        "branches": 80,
        "clean": true,
        "exclude": [
            "build/*"
        ],
        "extension": [
            ".js"
        ],
        "functions": 80,
        "include": [
            "src/**/*.js"
        ],
        "lines": 80,
        "reporter": [
            "lcov",
            "json-summary",
            "text-summary"
        ],
        "statements": 80
    }
}

cypress/plugins/index.js

/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

/**
 * @type {Cypress.PluginConfig}
 */

const path = require('path');
const fs = require('fs');
const webpackPreprocessor = require('@cypress/webpack-preprocessor')

// place downloads into Cypress.env('downloads_directory') folder
const downloadDirectory = path.join(__dirname, '..', 'downloads');

module.exports = (on, config) => {
    if (config.testingType === 'component') {
        require('@cypress/react/plugins/react-scripts')(on, config)
      }
    // custom tasks for sending and reporting code coverage
    require('@cypress/code-coverage/task')(on, config);

    // add other tasks to be registered here
    on('file:preprocessor', webpackPreprocessor())
    on('task', {
        clearDownloads() {
            console.log(`  📁 Clearing folder ${downloadDirectory}`);
            fs.rmdirSync(downloadDirectory, { recursive: true });
            return null;
        }
    });

    // IMPORTANT to return the config object
    // with the any changed environment variables
    return config;
};

home.spec.js

// cypress/integration/home/home.spec/js
'use strict';

describe('Home Page', function () {
      beforeEach(function () {
        cy.visit('/');
      });

      it('should display application name', function () {
        cy.get('.MuiTypography-h1').contains(
            'My Home page name'
        );
      });

});

Versions

Bumped up Cypress version from ^6.4.0 to 7.3.0