Upgrade cypress to 8.3.1, use new Component Test stuff, make fully self contained

.gitignore

@@ -23,3 +23,5 @@ yarn-debug.log*
 yarn-error.log*
 .nyc_output
 cypress/videos
+
+.idea

README.md

@@ -1,27 +1,12 @@
 # test-material-ui
-> Testing [Material UI](https://material-ui.com/) components using Cypress
+> Testing [Material UI](https://material-ui.com/) components using Cypress Component Testing
 
-![cypress version](https://img.shields.io/badge/cypress-5.6.0-brightgreen) ![cypress-react-unit-test version](https://img.shields.io/badge/cypress--react--unit--test-4.17.2-brightgreen)
-
-Uses [cypress-react-unit-test](https://github.com/bahmutov/cypress-react-unit-test)
-
-Installation
 
 ```shell
-$ npx create-react-app test-material-ui
-$ cd test-material-ui
-
-$ yarn add @material-ui/core @material-ui/icons @material-ui/lab
-info Direct dependencies
-├─ @material-ui/core@4.9.9
-├─ @material-ui/icons@4.9.1
-└─ @material-ui/lab@4.0.0-alpha.48
-
-$ yarn add -D cypress-react-unit-test@3.0.0-cypress-mount-mode.14
+$ yarn install
+$ yarn cypress open-ct
 ```
 
-Add [cypress.json](cypress.json) with experimental flag
-
 Write components and specs in [src](src) folder. I recommend looking at [src/autocomplete-spec.js](src/autocomplete-spec.js)
 
 ![Autocomplete test](images/autocomplete-demo.gif)

cypress.json

@@ -1,8 +1,7 @@
 {
-  "pluginsFile": "node_modules/cypress-react-unit-test/plugins/cra-v3",
-  "supportFile": "node_modules/cypress-react-unit-test/support",
-  "testFiles": "**/*-spec.js",
-  "experimentalComponentTesting": true,
-  "componentFolder": "src",
+  "component": {
+    "componentFolder": "src",
+    "testFiles": "**/*spec.{js,jsx,ts,tsx}"
+  },
   "viewportWidth": 500
 }

cypress/plugins/index.js

@@ -0,0 +1,7 @@
+module.exports = (on, config) => {
+    if (config.testingType === 'component') {
+        require('@cypress/react/plugins/react-scripts')(on, config)
+    }
+
+    return config
+}

package.json

@@ -1,31 +1,34 @@
 {
   "name": "test-material-ui",
-  "description": "Testing Material UI components using Cypress",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@date-io/date-fns": "1",
-    "@material-ui/core": "4.9.9",
-    "@material-ui/icons": "4.9.1",
-    "@material-ui/lab": "4.0.0-alpha.48",
-    "@material-ui/pickers": "3.2.10",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "date-fns": "2.12.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "@date-io/date-fns": "^1.3.13",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@material-ui/pickers": "^3.3.10",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "date-fns": "^2.23.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "cypress-expect run --passing 8",
-    "eject": "react-scripts eject",
-    "update:badges": "update-badge cypress cypress-react-unit-test"
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:cypress/recommended"
+    ]
   },
   "browserslist": {
     "production": [
@@ -40,9 +43,10 @@
     ]
   },
   "devDependencies": {
-    "cypress": "5.6.0",
-    "cypress-expect": "2.4.3",
-    "cypress-react-unit-test": "4.17.2",
-    "dependency-version-badge": "1.5.0"
+    "@cypress/react": "^5.10.0",
+    "@cypress/webpack-dev-server": "^1.6.0",
+    "cypress": "^8.3.1",
+    "eslint-plugin-cypress": "^2.11.3",
+    "webpack-dev-server": "3.11.2"
   }
 }

renovate.json

@@ -22,11 +22,6 @@
       "packagePatterns": [
         "*"
       ],
-      "excludePackagePatterns": [
-        "cypress",
-        "cypress-expect",
-        "cypress-react-unit-test"
-      ],
       "enabled": false
     }
   ]

src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.js

@@ -0,0 +1,25 @@
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+
+export default App;

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/autocomplete-spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 // select example from
 // https://material-ui.com/components/autocomplete/
 

src/button-spec.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import Button from '@material-ui/core/Button'
 
 it('renders a button', () => {

src/checkbox-labels-spec.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import CheckboxLabels from './checkbox-labels'
 
 it('renders checkboxes', () => {

src/date-picker-spec.js

@@ -3,7 +3,7 @@ import React from 'react'
 // https://material-ui.com/components/pickers/
 // https://codesandbox.io/s/z9k3z
 import DatePickers from './date-picker'
-import {mount} from 'cypress-react-unit-test'
+import {mount} from '@cypress/react'
 
 describe('Date pickers', () => {
   it('picks a day', () => {
@@ -39,6 +39,7 @@ describe('Date pickers', () => {
 
     cy.log('**check time**')
     cy.get('.MuiInputAdornment-positionEnd button').eq(2).click()
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.get('.MuiPickersClock-clock').should('be.visible')
       .wait(500) // for the demo
 

src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/list-item-spec.js

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import ListItem from '@material-ui/core/ListItem'
 import { ListItemText } from '@material-ui/core'
 import SimpleList from './list-demo'
@@ -19,6 +19,7 @@ it('renders a list item', () => {
 it('renders full list', () => {
   cy.viewport(500, 800)
   mount(<SimpleList />)
+  // eslint-disable-next-line cypress/no-unnecessary-waiting
   cy.contains('Drafts')
     .click()
     .wait(1000)

src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/select-spec.js

@@ -1,4 +1,4 @@
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 // select example from
 // https://material-ui.com/components/selects/
 import React from 'react'

src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

src/simple-rating-spec.js

@@ -1,13 +1,12 @@
 /// <reference types="cypress" />
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 // select example from
 // https://material-ui.com/components/rating/
 
 import React from 'react'
 import Rating from '@material-ui/lab/Rating'
 import Typography from '@material-ui/core/Typography'
 import Box from '@material-ui/core/Box'
-import { ExpansionPanelActions } from '@material-ui/core'
 
 export default function SimpleRating({ onSetRating }) {
   const [value, setValue] = React.useState(2)