feat: add plugins and support for react-scripts

Author: bahmutov

cypress.json

@@ -1,6 +1,6 @@
 {
-  "viewportWidth": 300,
-  "viewportHeight": 100,
+  "viewportWidth": 400,
+  "viewportHeight": 400,
   "video": false,
   "projectId": "z9dxah",
   "testFiles": "**/*spec.js",

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

@@ -16,6 +16,8 @@ it('Todo - should create snapshot', () => {
     />,
   )
   cy.get('[data-testid=item]').should('have.length', 2)
+  // disabled snapshot commands for now
+  // to speed up bundling
   // let tree = component.toJSON();
   // expect(tree).toMatchSnapshot();
 

cypress/component/component tests/basic/css/orange-button-spec.js

@@ -12,6 +12,8 @@ describe('Button', () => {
       .find('button')
       .should('have.css', 'background-color', 'rgb(245, 146, 62)')
 
-    cy.percySnapshot()
+    // for now disabled Percy in support commands
+    // to make the bundles smaller and faster
+    // cy.percySnapshot()
   })
 })

cypress/component/component tests/basic/hello-x-spec.js

@@ -15,7 +15,9 @@ describe('HelloX component', () => {
   it('renders Unicode', () => {
     mount(<HelloX name="🌎" />)
     cy.contains('Hello 🌎!')
-    cy.percySnapshot('Hello globe')
+    // for now disabled Percy in support commands
+    // to make the bundles smaller and faster
+    // cy.percySnapshot('Hello globe')
     cy.wait(1000)
   })
 })

cypress/plugins/index.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const webpack = require('@cypress/webpack-preprocessor')
 const babelConfig = require('../../babel.config.js')
-const { initPlugin } = require('cypress-plugin-snapshots/plugin')
+// const { initPlugin } = require('cypress-plugin-snapshots/plugin')
 
 // should we just reuse root webpack config?
 const webpackOptions = {
@@ -41,6 +41,6 @@ const options = {
 module.exports = (on, config) => {
   on('file:preprocessor', webpack(options))
 
-  initPlugin(on, config)
+  // initPlugin(on, config)
   return config
 }

cypress/support/index.js

@@ -16,6 +16,6 @@
 // custom commands provided by this package, built from TypeScript code in "lib"
 // using "npm run transpile"
 import 'cypress-react-unit-test/hooks'
-import '@percy/cypress'
+// import '@percy/cypress'
 import '@testing-library/cypress/add-commands'
-import 'cypress-plugin-snapshots/commands'
+// import 'cypress-plugin-snapshots/commands'

package-lock.json

@@ -40,14 +40,18 @@
     "testing"
   ],
   "author": "Gleb Bahmutov <[email protected]>",
-  "license": "ISC",
+  "license": "MIT",
+  "dependencies": {
+    "@cypress/webpack-preprocessor": "4.1.3",
+    "debug": "4.1.1",
+    "find-yarn-workspace-root": "1.2.1"
+  },
   "devDependencies": {
     "@babel/core": "7.4.5",
     "@babel/plugin-proposal-class-properties": "7.4.4",
     "@babel/plugin-transform-modules-commonjs": "7.7.5",
     "@babel/preset-env": "7.4.5",
     "@babel/preset-react": "7.0.0",
-    "@cypress/webpack-preprocessor": "1.1.3",
     "@material-ui/core": "4.9.5",
     "@material-ui/icons": "4.5.1",
     "@material-ui/lab": "4.0.0-alpha.39",
@@ -75,7 +79,7 @@
     "react-router": "6.0.0-alpha.1",
     "react-router-dom": "6.0.0-alpha.1",
     "semantic-release": "^17.0.4",
-    "standard": "12.0.1",
+    "standard": "14.3.3",
     "style-loader": "0.23.1",
     "styled-components": "5.0.0",
     "svg-url-loader": "3.0.3",

package.json

@@ -0,0 +1,69 @@
+const debug = require('debug')('cypress-react-unit-test')
+const path = require('path')
+const findYarnWorkspaceRoot = require('find-yarn-workspace-root')
+const webpack = require('@cypress/webpack-preprocessor')
+
+const webpackConfigPath = path.resolve(
+  findYarnWorkspaceRoot() || process.cwd(),
+  'node_modules',
+  'react-scripts',
+  'config',
+  'webpack.config.js',
+)
+
+debug('path to react-scripts own webpack.config.js: %s', webpackConfigPath)
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'development'
+process.env.NODE_ENV = 'development'
+
+const webpackFactory = require(webpackConfigPath)
+const webpackOptions = webpackFactory('development')
+debug('webpack options: %o', webpackOptions)
+
+// remove bunch of options, we just need to bundle spec files
+delete webpackOptions.optimization
+delete webpackOptions.plugins
+
+// ESLint loader does not know about our "cy" global so it will error
+// find it in the module processing rules and add global "cy" option
+debug('module property %o', webpackOptions.module)
+
+if (webpackOptions.module && Array.isArray(webpackOptions.module.rules)) {
+  const modulePre = webpackOptions.module.rules.find(
+    rule => rule.enforce === 'pre',
+  )
+  if (modulePre && Array.isArray(modulePre.use)) {
+    debug('found Pre block %o', modulePre)
+
+    const useEslintLoader = modulePre.use.find(
+      use => use.loader && use.loader.includes('eslint-loader'),
+    )
+    if (useEslintLoader) {
+      debug('found useEslintLoader %o', useEslintLoader)
+
+      if (useEslintLoader.options) {
+        if (Array.isArray(useEslintLoader.options.globals)) {
+          debug(
+            'adding cy to existing globals %o',
+            useEslintLoader.options.globals,
+          )
+          useEslintLoader.options.globals.push('cy')
+          useEslintLoader.options.globals.push('Cypress')
+        } else {
+          debug('setting new list of globals with cy and Cypress')
+          useEslintLoader.options.globals = ['cy', 'Cypress']
+        }
+      }
+    }
+  }
+}
+
+const options = {
+  webpackOptions,
+  watchOptions: {},
+}
+
+module.exports = () => {
+  return webpack(options)
+}

plugins/cra-v3/file-preprocessor.js

@@ -0,0 +1,5 @@
+const filePreprocessor = require('./file-preprocessor')
+
+module.exports = on => {
+  on('file:preprocessor', filePreprocessor())
+}

plugins/cra-v3/index.js

@@ -0,0 +1,3 @@
+// should be loaded from cypress.json as a support file
+// "supportFile": "node_modules/cypress-react-unit-test/support"
+import 'cypress-react-unit-test/hooks'