chore(component-testing): Remove useless code & deps in @cypress/react and @cypress/vue (#15113)

* Remove useless code

* Add code-coverage to reacr devDependencies

* Remove react/support imports

* Remove some useless code from @cypress/react

* Cleanup vue

* Make it works :)

* Fix react errors

* Fix next.js react example

Co-authored-by: Lachlan Miller <[email protected]>
Co-authored-by: Barthélémy Ledoux <[email protected]>

Author: 3 people

npm/react/.mocharc.json

@@ -307,6 +307,14 @@ If your React and React DOM libraries are installed in non-standard paths (think
 
 ## Code coverage
 
+In order to use code coverage you can follow the instructions from [docs](https://github.com/cypress-io/code-coverage). In most of cases you need to install 2 dependencies: 
+
+```
+npm i @cypress/code-coverage babel-plugin-istanbul
+
+yarn add @cypress/code-coverage babel-plugin-istanbul
+```
+
 If you are using [plugins/cra-v3](plugins/cra-v3) it instruments the code on the fly using `babel-plugin-istanbul` and generates report using dependency [cypress-io/code-coverage](https://github.com/cypress-io/code-coverage) (included). If you want to disable code coverage instrumentation and reporting, use `--env coverage=false` or `CYPRESS_coverage=false` or set in your `cypress.json` file
 
 ```json

npm/react/README.md

@@ -5,10 +5,7 @@
   "projectId": "z9dxah",
   "testFiles": "**/*spec.{js,jsx,ts,tsx}",
   "env": {
-    "reactDevtools": true,
-    "cypress-react-selector": {
-      "root": "#cypress-root"
-    }
+    "reactDevtools": true
   },
   "ignoreTestFiles": [
     "**/__snapshots__/*",

npm/react/cypress.json

@@ -2,9 +2,9 @@ import * as React from 'react'
 import { LazyComponent } from './LazyComponent'
 import { mount } from '@cypress/react'
 
-// NOTE: It doesn't work because of chunk splitting issue with webpack
-describe.skip('React.lazy component with <Suspense />', () => {
+describe('React.lazy component with <Suspense />', () => {
   it('renders and retries till component is loaded', () => {
+    cy.viewport(1000, 1000)
     mount(<LazyComponent />)
     cy.contains('loading...')
     cy.contains('Your dog is')

npm/react/cypress/component/advanced/lazy-loaded-suspense/lazy-loaded-suspense.spec.tsx

@@ -23,7 +23,7 @@ it('Todo - should create snapshot', () => {
   // expect(tree).toMatchSnapshot();
 
   // entire test area
-  cy.get('#cypress-root')
+  cy.get('#__cy_root')
   .invoke('html')
   .then(pretty)
   .should(

npm/react/cypress/component/advanced/react-book-example/src/Todos.spec.js

@@ -16,7 +16,7 @@ describe('Renderless component', () => {
     const onMoved = cy.stub()
 
     mount(<MouseMovement onMoved={onMoved} />)
-    cy.get('#cypress-root').should('be.empty')
+    cy.get('#__cy_root').should('be.empty')
     cy.document()
     .trigger('mousemove')
     .then(() => {

npm/react/cypress/component/advanced/renderless/mouse-spec.js

@@ -1,6 +1,5 @@
 import React from 'react'
-import { unmountComponentAtNode } from 'react-dom'
-import { mount } from '@cypress/react'
+import { mount, unmount } from '@cypress/react'
 import LoadingIndicator from './LoadingIndicator'
 
 // compare these tests to Jest + Enzyme tests in
@@ -74,17 +73,9 @@ describe('LoadingIndicator', () => {
       )
 
       cy.tick(2010)
-      cy.get('#cypress-root').then(($el) => {
-        unmountComponentAtNode($el[0])
-      })
+      unmount()
 
       cy.get('@clearTimeout').should('have.been.calledOnce')
     })
   })
-
-  afterEach(() => {
-    cy.get('#cypress-root').then(($el) => {
-      unmountComponentAtNode($el[0])
-    })
-  })
 })

npm/react/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js

@@ -2,7 +2,6 @@
 import Card from './card-without-effect.jsx'
 import React from 'react'
 import { mount, unmount } from '@cypress/react'
-import { unmountComponentAtNode } from 'react-dom'
 
 it('should select null after timing out', () => {
   const onSelect = cy.stub()
@@ -29,9 +28,7 @@ it('should cleanup on being removed', () => {
     expect(onSelect).to.not.have.been.called
   })
 
-  cy.get('#cypress-root').then(($el) => {
-    unmountComponentAtNode($el[0])
-  })
+  unmount()
 
   cy.tick(5000).then(() => {
     expect(onSelect).to.not.have.been.called

npm/react/cypress/component/advanced/timers/card-without-effect-spec.js

@@ -14,7 +14,7 @@ const Hello = ({ children }) => {
 describe('mount in before hook', () => {
   // let's mount the component once
   // and then run multiple tests against it
-  before(() => {
+  beforeEach(() => {
     mount(
       <Hello>
         <div className="inside">Inner div</div>

npm/react/cypress/component/basic/before-hook/spec.js

@@ -7,7 +7,7 @@ import pretty from 'pretty'
 it('says hello world', () => {
   mount(<Hello name="world" />)
   cy.contains('Hello, world!').should('be.visible')
-  cy.get('#cypress-root')
+  cy.get('#__cy_root')
   .invoke('html')
   .then(pretty)
   .should('equal', '<h1>Hello, world!</h1>')

npm/react/cypress/component/basic/react-tutorial/pretty-snapshots-spec.js

@@ -1,2 +1 @@
-require('@cypress/react/support')
 require('cypress-axe')

npm/react/examples/a11y/cypress/support/index.js

@@ -1,2 +1 @@
-import '@cypress/react/support'
 import '@cypress/code-coverage/support'

npm/react/examples/nextjs/cypress/support/index.js

@@ -1,2 +1 @@
-require('@cypress/react/support')
 require('@cypress/code-coverage/support')

npm/react/examples/react-scripts-folder/cypress/support/index.js

@@ -1,2 +1 @@
-require('@cypress/react/support')
 require('@cypress/code-coverage/support')

npm/react/examples/react-scripts/cypress/support/index.js

@@ -6,8 +6,7 @@ const ingredients = ['bacon', 'tomato', 'mozzarella', 'pineapples']
 
 describe('RemotePizza', () => {
   it('download ingredients from internets (network mock)', () => {
-    cy.server()
-    cy.route('https://httpbin.org/anything*', { args: { ingredients } }).as(
+    cy.intercept('https://httpbin.org/anything*', { args: { ingredients } }).as(
       'pizza',
     )