cypress-io · bahmutov · May 8, 2020 · May 8, 2020 · May 8, 2020 · May 8, 2020
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,8 @@
 public/
 node_modules/
 dist
-cypress/videos
-cypress/screenshots
+**/cypress/videos
+**/cypress/screenshots
+package-lock.json
+.nyc_output
+coverage
diff --git a/circle.yml b/circle.yml
@@ -1,6 +1,6 @@
 version: 2.1
 orbs:
-  cypress: cypress-io/cypress@1
+  cypress: cypress-io/cypress@1.21.0
 workflows:
   build:
     jobs:
@@ -21,6 +21,18 @@ workflows:
                 name: Build folder 🏗
                 command: npm run build
 
+      - cypress/run:
+          name: Example React Scripts
+          requires:
+            - Install
+          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
+          install-command: npm install
+          verify-command: echo 'Already verified'
+          no-workspace: true
+          working_directory: examples/react-scripts
+          command: npm test
+          store_artifacts: true
+
       - cypress/run:
           name: Test
           parallelism: 4
@@ -32,6 +44,7 @@ workflows:
           # we are not going to use results from this job anywhere else
           no-workspace: true
           record: false
+          store_artifacts: true
           # following examples from
           # https://circleci.com/docs/2.0/parallelism-faster-jobs/
           command: |
@@ -49,7 +62,9 @@ workflows:
           requires:
             - Install
             - Test
-          install-command: echo 'Nothing to install in this job'
+            - Example React Scripts
+          install-command: echo 'Already installed'
+          verify-command: echo 'Already verified'
           no-workspace: true
           # instead of "cypress run" do NPM release 😁
           # clear environment variables to trick semantic-release

diff --git a/examples/react-scripts/.npmrc b/examples/react-scripts/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/examples/react-scripts/cypress.json b/examples/react-scripts/cypress.json
@@ -0,0 +1,8 @@
+{
+  "fixturesFolder": false,
+  "testFiles": "**/*.cy-spec.js",
+  "viewportWidth": 500,
+  "viewportHeight": 500,
+  "experimentalComponentTesting": true,
+  "componentFolder": "src"
+}
diff --git a/examples/react-scripts/cypress/integration/spec.js b/examples/react-scripts/cypress/integration/spec.js
@@ -0,0 +1,6 @@
+/// <reference types="cypress" />
+describe('integration spec', () => {
+  it('works', () => {
+    expect(1).to.equal(1)
+  })
+})
diff --git a/examples/react-scripts/cypress/plugins/index.js b/examples/react-scripts/cypress/plugins/index.js
@@ -0,0 +1,7 @@
+const preprocessor = require('../../../../plugins/react-scripts')
+module.exports = (on, config) => {
+  preprocessor(on, config)
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
+}
diff --git a/examples/react-scripts/cypress/support/index.js b/examples/react-scripts/cypress/support/index.js
@@ -0,0 +1,2 @@
+require('cypress-react-unit-test/support')
+require('@cypress/code-coverage/support')
diff --git a/examples/react-scripts/package.json b/examples/react-scripts/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "example-react-scripts",
+  "description": "Component testing with specs inside the src folder",
+  "private": true,
+  "scripts": {
+    "test": "../../node_modules/.bin/cypress run",
+    "cy:open": "../../node_modules/.bin/cypress open"
+  },
+  "devDependencies": {
+    "cypress-react-unit-test": "file:../.."
+  }
+}
diff --git a/examples/react-scripts/public/favicon.ico b/examples/react-scripts/public/favicon.ico
diff --git a/examples/react-scripts/public/index.html b/examples/react-scripts/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/examples/react-scripts/public/logo192.png b/examples/react-scripts/public/logo192.png
diff --git a/examples/react-scripts/public/logo512.png b/examples/react-scripts/public/logo512.png
diff --git a/examples/react-scripts/public/manifest.json b/examples/react-scripts/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/examples/react-scripts/public/robots.txt b/examples/react-scripts/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/examples/react-scripts/src/App.css b/examples/react-scripts/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);
+  }
+}
diff --git a/examples/react-scripts/src/App.cy-spec.js b/examples/react-scripts/src/App.cy-spec.js
@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+// compare to App.test.js
+import React from 'react'
+import App from './App'
+import { mount } from 'cypress-react-unit-test'
+
+describe('App', () => {
+  it('renders learn react link', () => {
+    mount(<App />)
+    cy.contains(/Learn React/)
+  })
+})
diff --git a/examples/react-scripts/src/App.js b/examples/react-scripts/src/App.js
@@ -0,0 +1,38 @@
+import React from 'react'
+// this CSS will be inlined ✅
+import './App.css'
+import logo from './logo.svg' // => "/__root/src/logo.svg"
+import cypressLogo from './cypress-logo-dark.png' // => "/__root/src/cypress-logo-dark.png"
+
+// large image will be transformed into
+// a different url static/media/vans.25e5784d.jpg
+// import giantImage from './vans.jpg'
+
+// we cannot load the image from direct url
+// import giantImage from '/__root/src/vans.jpg'
+// <img src={giantImage} alt="cypress-logo" />
+
+function App() {
+  return (
+    <div className="App">
+      <img src={cypressLogo} className="Cypress-log" />
+
+      <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
diff --git a/examples/react-scripts/src/App.test.js b/examples/react-scripts/src/App.test.js
@@ -0,0 +1,9 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import App from './App'
+
+test('renders learn react link', () => {
+  const { getByText } = render(<App />)
+  const linkElement = getByText(/learn react/i)
+  expect(linkElement).toBeInTheDocument()
+})
diff --git a/examples/react-scripts/src/Logo.cy-spec.js b/examples/react-scripts/src/Logo.cy-spec.js
@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+// import SVG as ReactComponent
+import { ReactComponent as Logo } from './logo.svg'
+
+describe('Logo', () => {
+  it('imports SVG', () => {
+    mount(<Logo />)
+    cy.get('path').should('have.attr', 'd')
+  })
+})
diff --git a/examples/react-scripts/src/cypress-logo-dark.png b/examples/react-scripts/src/cypress-logo-dark.png
diff --git a/examples/react-scripts/src/index.css b/examples/react-scripts/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;
+}
diff --git a/examples/react-scripts/src/index.js b/examples/react-scripts/src/index.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+)
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister()
diff --git a/examples/react-scripts/src/logo.svg b/examples/react-scripts/src/logo.svg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		require('cypress-react-unit-test/support')
		require('@cypress/code-coverage/support')