Test react scripts (#74)

bahmutov · web-flow · commit 2d29c87c45fb · 2020-04-13T15:00:54.000-04:00
* add example React app

* delete webpack optimization

* use module to clean options

* fix lint

* disable video in e2e test, update snapshot

* split workflow into 3 jobs

* add react app test job

* add no-op install

* add public folder to Git

* add README to react-app example

* link example from root readme

* add timeout, fix warning

* remove wait-on

* do not use Node 12 executor for the app

* try to use default executor for install

* hmm back to Node 12

* try using react-scripts 3.2

* ignore build folder

* add example of working dynamic import
diff --git a/.eslintignore b/.eslintignore
@@ -1,4 +1,9 @@
 test/_test-output
 cypress/tests/e2e/compile-error.js
 test/fixtures
+examples/react-app/src
+examples/react-app/node_modules
+examples/react-app/build
+examples/react-app/package.json
+examples/react-app/cypress/integration/dynamic-import-spec.js
 *.ts
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,4 @@ node_modules/
 _test-output
 cypress/videos
 cypress/screenshots
+examples/react-app/build/
diff --git a/README.md b/README.md
@@ -35,13 +35,17 @@ This plugin (and all Cypress plugins) run in Cypress's own version of Node. If y
 In your project's [plugins file](https://on.cypress.io/guides/tooling/plugins-guide.html):
 
 ```javascript
-const webpack = require('@cypress/webpack-preprocessor')
+const webpackPreprocessor = require('@cypress/webpack-preprocessor')
 
 module.exports = (on) => {
-  on('file:preprocessor', webpack())
+  on('file:preprocessor', webpackPreprocessor())
 }
 ```
 
+## Examples
+
+- [React app](examples/react-app)
+
 ## Options
 
 Pass in options as the second argument to `webpack`:
diff --git a/__snapshots__/e2e.spec.js b/__snapshots__/e2e.spec.js
@@ -33,10 +33,8 @@ SyntaxError: /[cwd]/cypress/tests/e2e/compile-error.js: Unexpected token, expect
      |                            ^
   15 | })
   16 | 
-
  @ multi ./cypress/tests/e2e/compile-error.js main[0]
 
-
 This occurred while Cypress was compiling and bundling your test code. This is usually caused by:
 
 - A missing file or dependency
@@ -53,18 +51,12 @@ Fix the error in your code and re-run your tests.
   │ Pending:      0                                                                                │
   │ Skipped:      0                                                                                │
   │ Screenshots:  0                                                                                │
-  │ Video:        true                                                                             │
+  │ Video:        false                                                                            │
   │ Duration:     X seconds                                                                        │
   │ Spec Ran:     e2e/compile-error.js                                                             │
   └────────────────────────────────────────────────────────────────────────────────────────────────┘
 
 
-  (Video)
-
-  -  Started processing:  Compressing to 32 CRF                                                     
-  -  Finished processing: /[cwd]/cypress/videos/e2e/compile-error.js.mp4                  (X second)
-
-
 ====================================================================================================
 
   (Run Finished)
diff --git a/circle.yml b/circle.yml
@@ -1,13 +1,29 @@
+# based on https://github.com/cypress-io/circleci-orb/blob/master/docs/recipes.md
 version: 2.1
 orbs:
   cypress: cypress-io/cypress@1
 workflows:
   build:
     jobs:
-      - cypress/run:
+      # first, run a single job to install dependencies and Cypress
+      # and perform a few more small steps like linting
+      - cypress/install:
+          name: Install
           executor: cypress/base-12-14-0
           yarn: true
+          post-steps:
+            - run:
+                name: Show info 📺
+                command: npx cypress info
+
+      - cypress/run:
+          name: Tests
+          requires:
+            - Install
+          executor: cypress/base-12-14-0
+          install-command: echo 'Nothing else to install in this job'
           command: npm test
+          no-workspace: true
           post-steps:
             - run:
                 name: Lint code 🧹
@@ -18,6 +34,29 @@ workflows:
             - run:
                 name: Run tests w/ webpack@latest 🧪
                 command: npm test
-            - run:
-                name: Semantic release 🚀
-                command: npm run semantic-release
+
+      - cypress/run:
+          name: Test React App
+          requires:
+            - Install
+          executor: cypress/base-12-14-0
+          install-command: echo 'Nothing else to install in this job'
+          timeout: '1m'
+          start: npm start
+          no-workspace: true
+          working_directory: examples/react-app
+
+      # wait for all jobs to finish and possible run NPM release
+      - cypress/run:
+          name: NPM release
+          requires:
+            - Install
+            - Tests
+            - Test React App
+          executor: cypress/base-12-14-0
+          # nothing to install - cypress/install job does it
+          # and nothing to pass to the next job
+          install-command: echo 'Nothing else to install in this job'
+          no-workspace: true
+          # instead of "cypress run" do NPM release 😁
+          command: npm run semantic-release
diff --git a/examples/react-app/.env b/examples/react-app/.env
@@ -0,0 +1,2 @@
+SKIP_PREFLIGHT_CHECK=true
+BROWSER=none
diff --git a/examples/react-app/README.md b/examples/react-app/README.md
@@ -0,0 +1,11 @@
+This is an example React application clone from [codesandbox.io](https://codesandbox.io/s/oj3qm2zq06) and blog post [How To Build a React To-Do App with React Hooks](https://www.digitalocean.com/community/tutorials/how-to-build-a-react-to-do-app-with-react-hooks).
+
+Because the application is using `react-scripts`, we can point our Cypress Webpack preprocessor at the Webpack config included with `react-scripts` module. See [cypress/plugins/index.js](cypress/plugins/index.js) file.
+
+**Tip:** you can use [find-webpack](https://github.com/bahmutov/find-webpack) utility to find the Webpack config options provided by common tools: `react-scripts`, Vue CLI.
+
+## Chunks and dynamic imports
+
+Normally, a code that uses [dynamic imports](https://github.com/tc39/proposal-dynamic-import) is bundled by Webpack into a separate JavaScript bundle (chunk) to be loaded on demand. Cypress needs all chunks to be in the same bundled file, since it cannot be serving additional files, besides the spec itself. Thus we need to force all chunks into the single bundle by changing the Webpack plugins' options.
+
+See [cypress/integration/dynamic-import-spec.js](cypress/integration/dynamic-import-spec.js) and the [cypress/plugins/index.js](cypress/plugins/index.js) file - it uses [find-webpack cleanForCypress](https://github.com/bahmutov/find-webpack) utility to force dynamic imports into the same spec bundle.
diff --git a/examples/react-app/cypress.json b/examples/react-app/cypress.json
@@ -0,0 +1,6 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "fixturesFolder": false,
+  "supportFile": false,
+  "viewportWidth": 600
+}
diff --git a/examples/react-app/cypress/.eslintrc.json b/examples/react-app/cypress/.eslintrc.json
@@ -0,0 +1,10 @@
+{
+  "env": {
+    "cypress/globals": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:cypress/recommended"
+  ],
+  "plugins": ["cypress"]
+}
diff --git a/examples/react-app/cypress/integration/dynamic-import-spec.js b/examples/react-app/cypress/integration/dynamic-import-spec.js
@@ -0,0 +1,9 @@
+/// <reference types="cypress" />
+describe('Dynamic import', () => {
+  it('works', () => {
+    // dynamically import module
+    // and then invoke an exported method "reverse"
+    cy.wrap(import('../utils'))
+      .invoke('reverse', 'Hello').should('equal', 'olleH')
+  })
+})
diff --git a/examples/react-app/cypress/integration/spec.js b/examples/react-app/cypress/integration/spec.js
@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+// this spec file will be bundled using the same Webpack options
+// as the React App itself. See ../plugins/index.js
+
+describe('Todo app', () => {
+  it('works', () => {
+    cy.visit('/')
+    cy.get('.todo').should('have.length', 3)
+    cy.get('input').type('Write Cypress tests{enter}')
+    cy.get('.todo').should('have.length', 4)
+  })
+})
diff --git a/examples/react-app/cypress/plugins/index.js b/examples/react-app/cypress/plugins/index.js
@@ -0,0 +1,40 @@
+const findWebpack = require('find-webpack')
+const webpackPreprocessor = require('../../../..')
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on) => {
+  // find the Webpack config used by react-scripts
+  const webpackOptions = findWebpack.getWebpackOptions()
+
+  if (!webpackOptions) {
+    throw new Error('Could not find Webpack in this project 😢')
+  }
+
+  // if we just pass webpackOptions to the preprocessor
+  // it won't work - because react-scripts by default
+  // includes plugins that split specs into chunks, etc.
+  // https://github.com/cypress-io/cypress-webpack-preprocessor/issues/31
+
+  // solution 1
+  // blunt: delete entire optimization object
+  // delete webpackOptions.optimization
+
+  // solution 2
+  // use a module that carefully removes only plugins
+  // that we found to be breaking the bundling
+  // https://github.com/bahmutov/find-webpack
+  const cleanOptions = {
+    reactScripts: true,
+  }
+
+  findWebpack.cleanForCypress(cleanOptions, webpackOptions)
+
+  const options = {
+    webpackOptions,
+    watchOptions: {},
+  }
+
+  on('file:preprocessor', webpackPreprocessor(options))
+}
diff --git a/examples/react-app/cypress/utils.js b/examples/react-app/cypress/utils.js
@@ -0,0 +1 @@
+export const reverse = (s) => s.split('').reverse().join('')
diff --git a/examples/react-app/package.json b/examples/react-app/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "react-app",
+  "version": "1.0.0",
+  "description": "Transpiling specs using Webpack options from react-app",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "start": "../../node_modules/.bin/react-scripts start",
+    "test": "../../node_modules/.bin/cypress run",
+    "dev": "../../node_modules/.bin/start-test 3000 cy:open",
+    "cy:open": "../../node_modules/.bin/cypress open"
+  },
+  "license": "ISC",
+  "author": "",
+  "keywords": [],
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/examples/react-app/public/favicon.ico b/examples/react-app/public/favicon.ico
diff --git a/examples/react-app/public/index.html b/examples/react-app/public/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. 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>
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css"
+    />
+  </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-app/public/manifest.json b/examples/react-app/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/examples/react-app/src/App.css b/examples/react-app/src/App.css
@@ -0,0 +1,24 @@
+.app {
+  background: #209cee;
+  padding: 30px;
+  height: 100vh;
+}
+
+.todo-list {
+  background: #e8e8e8;
+  border-radius: 4px;
+  padding: 5px;
+  max-width: 400px;
+}
+
+.todo {
+  background: #fff;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
+  padding: 3px 10px;
+  font-size: 12px;
+  margin-bottom: 6px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
diff --git a/examples/react-app/src/App.js b/examples/react-app/src/App.js
diff --git a/examples/react-app/src/App.spec.js b/examples/react-app/src/App.spec.js
diff --git a/examples/react-app/src/Todo.spec.js b/examples/react-app/src/Todo.spec.js
diff --git a/examples/react-app/src/index.js b/examples/react-app/src/index.js
diff --git a/package.json b/package.json
diff --git a/test/e2e/helpers.js b/test/e2e/helpers.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+SKIP_PREFLIGHT_CHECK=true`
	`2`	`+BROWSER=none`