feat: throw an error if a component spec calls cy.visit (#287)

Author: bahmutov

README.md

@@ -121,6 +121,7 @@ Spec | Description
 [window-spec.js](cypress/component/basic/window-spec.js) | In the component test, the spec `window` and the application's `window` where the component is running should be the same object
 [css](cypress/component/basic/css) | Shows that component with `import './Button.css'` works
 [network](cypress/component/basic/network) | Confirms we can use `cy.route` to stub / spy on component's network calls
+[no-visit](cypress/component/basic/no-visit) | Component specs cannot call `cy.visit`
 [react-book-by-chris-noring](cypress/component/basic/react-book-by-chris-noring) | Copied test examples from [React Book](https://softchris.github.io/books/react) and adapted for Cypress component tests
 [react-tutorial](cypress/component/basic/react-tutorial) | Tests from official [ReactJS tutorial](https://reactjs.org/tutorial/tutorial.html) copied and adapted for Cypress component tests
 [stub-example](cypress/component/basic/stub-example) | Uses `cy.stub` as component props

cypress/component/basic/no-visit/spec.js

@@ -0,0 +1,9 @@
+/// <reference types="cypress" />
+describe('Trying to use cy.visit in component spec', () => {
+  it('throws an error', () => {
+    // https://github.com/bahmutov/cypress-react-unit-test/issues/286
+    expect(() => {
+      cy.visit('index.html')
+    }).to.throw
+  })
+})

cypress/integration/integration tests/integration-spec.js

@@ -1,4 +1,7 @@
 /// <reference types="cypress" />
+const React = require('react')
+const { mount } = require('../../..')
+
 describe('integration tests', () => {
   it('loads page for E2E', () => {
     cy.visit('index.html')
@@ -9,4 +12,11 @@ describe('integration tests', () => {
     cy.visit('index.html')
     cy.window().should('have.property', 'React')
   })
+
+  it('throws an Error if I try to use mount', () => {
+    cy.log('About to try using *mount*')
+    expect(() => {
+      mount(<div>Example</div>)
+    }).to.throw
+  })
 })

lib/hooks.ts

@@ -1,6 +1,21 @@
 // @ts-ignore
 const isComponentSpec = () => Cypress.spec.specType === 'component'
 
+// When running component specs, we cannot allow "cy.visit"
+// because it will wipe out our preparation work, and does not make much sense
+// thus we overwrite "cy.visit" to throw an error
+Cypress.Commands.overwrite('visit', (visit, ...args: any[]) => {
+  if (isComponentSpec()) {
+    throw new Error(
+      'cy.visit from a component spec is not allowed\n' +
+        'see https://github.com/bahmutov/cypress-react-unit-test/issues/286',
+    )
+  } else {
+    // allow regular visit to proceed
+    return visit(...args)
+  }
+})
+
 /** Initialize an empty document with root element */
 function renderTestingPlatform() {
   // Let's mount components under a new div with this id