cypress-io · nagash77 · Aug 3, 2023 · Jul 28, 2023
diff --git a/examples/component-tests/README.md b/examples/component-tests/README.md
@@ -1,4 +1,34 @@
 # example: component-tests
 
-This example is built based on the instructions from the [Cypress documentation](https://docs.cypress.io/)
-[React Quickstart](https://docs.cypress.io/guides/component-testing/react/quickstart). It uses [Vite](https://vitejs.dev/) to create the app.
+This example was built as follows:
+
+1. [Vite > Getting Started](https://vitejs.dev/guide/) instructions with the [react](https://vite.new/react) template were used to create the app
+    ```bash
+    npm create vite@latest component-tests -- --template react
+    ```
+    The linting `npm` modules and linting script have been removed, since this is out-of-scope for the example.
+1. The Cypress documentation instructions from [Component Testing > Getting Started](https://on.cypress.io/guides/component-testing/getting-started) were followed to set up component testing, including copying
+
+    - `<Stepper />` component: [react/my-awesome-app/src/components/Stepper.jsx](https://github.com/cypress-io/component-testing-quickstart-apps/blob/main/react/my-awesome-app/src/components/Stepper.jsx)
+
+    from the [Cypress Component Testing Quickstart Apps](https://github.com/cypress-io/component-testing-quickstart-apps) repo to this repo's `examples/component-tests/src/components/` sub-directory.
+1. The script `"test": "cypress run --component"` was added to `package.json`.
+## Execution
+
+Execute the following to change to this directory:
+
+```bash
+cd examples/component-tests
+```
+
+Install dependencies with:
+
+```bash
+npm ci
+```
+
+Run Cypress component testing with:
+
+```bash
+npm test
+```
diff --git a/examples/component-tests/cypress.config.js b/examples/component-tests/cypress.config.js
@@ -1,6 +1,7 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
+  video: false,
   component: {
     devServer: {
       framework: "react",

diff --git a/examples/component-tests/index.html b/examples/component-tests/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/examples/component-tests/package-lock.json b/examples/component-tests/package-lock.json
diff --git a/examples/component-tests/package.json b/examples/component-tests/package.json
@@ -1,7 +1,7 @@
 {
   "name": "example-component-tests",
   "private": true,
-  "version": "1.0.0",
+  "version": "2.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -14,10 +14,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react": "^3.0.0",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
     "cypress": "12.17.3",
-    "vite": "^4.3.9"
+    "vite": "^4.4.5"
   }
 }
diff --git a/examples/component-tests/src/App.css b/examples/component-tests/src/App.css
@@ -9,6 +9,7 @@
   height: 6em;
   padding: 1.5em;
   will-change: filter;
+  transition: filter 300ms;
 }
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);

diff --git a/examples/component-tests/src/App.jsx b/examples/component-tests/src/App.jsx
@@ -1,17 +1,18 @@
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
 import './App.css'
 
 function App() {
   const [count, setCount] = useState(0)
 
   return (
-    <div className="App">
+    <>
       <div>
         <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
+          <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
-        <a href="https://reactjs.org" target="_blank">
+        <a href="https://react.dev" target="_blank">
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
@@ -27,7 +28,7 @@ function App() {
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
-    </div>
+    </>
   )
 }
 

diff --git a/examples/component-tests/src/components/Stepper.cy.jsx b/examples/component-tests/src/components/Stepper.cy.jsx
@@ -12,8 +12,8 @@ describe('<Stepper />', () => {
     cy.get('[data-cy=counter]').should('have.text', '0')
   })
 
-  it('supports an "initial" prop to set the value', () => {
-    cy.mount(<Stepper initial={100} />)
+  it('supports a "count" prop to set the value', () => {
+    cy.mount(<Stepper count={100} />)
     cy.get('[data-cy=counter]').should('have.text', '100')
   })
 

diff --git a/examples/component-tests/src/components/Stepper.jsx b/examples/component-tests/src/components/Stepper.jsx
@@ -1,19 +1,19 @@
-import { useState } from 'react'
+import { useState } from "react";
 
-export default function Stepper({ initial = 0, onChange = () => {} }) {
-  const [count, setCount] = useState(initial)
+export default function Stepper({ count: _count = 0, onChange = () => {} }) {
+  const [count, setCount] = useState(_count);
 
   const handleIncrement = () => {
-    const newCount = count + 1
-    setCount(newCount)
-    onChange(newCount)
-  }
+    const newCount = count + 1;
+    setCount(newCount);
+    onChange(newCount);
+  };
 
   const handleDecrement = () => {
-    const newCount = count - 1
-    setCount(newCount)
-    onChange(newCount)
-  }
+    const newCount = count - 1;
+    setCount(newCount);
+    onChange(newCount);
+  };
 
   return (
     <div>
@@ -25,5 +25,5 @@ export default function Stepper({ initial = 0, onChange = () => {} }) {
         +
       </button>
     </div>
-  )
+  );
 }
diff --git a/examples/component-tests/src/index.css b/examples/component-tests/src/index.css
@@ -1,7 +1,6 @@
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;

diff --git a/examples/component-tests/src/main.jsx b/examples/component-tests/src/main.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App'
+import App from './App.jsx'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(