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

[mwren-mshanken]

I’ve been setting up component testing, and ran into similar behavior.

I was exporting a custom mount in cypress/support/index.js

export { mountTheme as mount } from './test-utils.tsx';

importing this manually in my test files solved this issue. Posting here since I ran into the same end result, but am not sure if you have the same root cause.

In my individual test files I import:

import { mountTheme as mount } from '../support/test-utils';

I’d tried manually passing testingType in my config files, combining my config files, etc, and nothing helped. This was causing every run to run as component

Throwing this out there since this may lead you to a similar solution.

[ericblade]

cy.visit will not work inside of component tests.

… noting here that the problem appears to be that they are not using the component tester, but are erroring as if they were.

also, came here because I’m hoping to find a way to defeat this error, because i am trying to find a way use the component tester outside of a cra app, which doesn’t seem to be possible.