feat: create-cypress-tests wizard (#8857)

Co-authored-by: Jessica Sachs <jess@jessicasachs.io>

.eslintignore

@@ -42,3 +42,7 @@ npm/webpack-preprocessor/examples/use-babelrc/cypress/integration/spec.js
 **/.git
 
 /npm/react/bin/*
+/npm/react/**/coverage
+**/.next/**
+/npm/create-cypress-tests/initial-template
+/npm/create-cypress-tests/**/*.template.*

.gitignore

@@ -26,7 +26,7 @@ npm/**/cypress/screenshots
 # from example
 packages/example/app
 packages/example/build
-packages/example/cypress
+packages/example/cypress/integration
 
 # from server
 packages/server/.cy
@@ -39,6 +39,10 @@ packages/server/test/support/fixtures/server/libs
 /npm/react/bin/*
 /npm/react/cypress/videos
 
+# from npm/create-cypress-tests
+/npm/create-cypress-tests/initial-template
+/npm/create-cypress-tests/src/test-output
+
 # Building app binary
 scripts/support
 package-lock.json

circle.yml

@@ -992,7 +992,18 @@ jobs:
           name: Run e2e example tests
           command: yarn test
           working_directory: npm/react/<<parameters.path>>
-
+
+
+  npm-create-cypress-tests:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run: yarn workspace create-cypress-tests build
+      - run:
+          name: Run unit test
+          command: yarn workspace create-cypress-tests test 
+
   npm-eslint-plugin-dev:
     <<: *defaults
     steps:
@@ -1822,6 +1833,10 @@ linux-workflow: &linux-workflow
         path: examples/webpack-options
         requires:
           - npm-react
+
+    - npm-create-cypress-tests:
+        requires:
+          - build
 
     - npm-eslint-plugin-dev:
         requires:

npm/create-cypress-tests/.eslintrc

@@ -0,0 +1,38 @@
+{
+  "plugins": [
+    "cypress",
+    "@cypress/dev"
+  ],
+  "extends": [
+    "plugin:@cypress/dev/general",
+    "plugin:@cypress/dev/tests"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "env": {
+    "cypress/globals": true
+  },
+  "rules": {
+    "no-console": "off",
+    "mocha/no-global-tests": "off",
+    "@typescript-eslint/no-unused-vars": "off"
+  },
+  "overrides": [
+    {
+      "files": [
+        "lib/*"
+      ],
+      "rules": {
+        "no-console": 1
+      }
+    },
+    {
+      "files": [
+        "**/*.json"
+      ],
+      "rules": {
+        "quotes": "off",
+        "comma-dangle": "off"
+      }
+    }
+  ]
+}

npm/create-cypress-tests/.mocharc.json

@@ -0,0 +1,7 @@
+{
+  "watch-ignore": [
+    "node_modules"
+  ],
+  "require": "ts-node/register",
+  "exit": true
+}

npm/create-cypress-tests/.npmignore

@@ -0,0 +1,4 @@
+./src/
+./initial-template/
+scripts/
+__snapshots__/

npm/create-cypress-tests/README.md

@@ -0,0 +1,52 @@
+# Create Cypress Tests 
+
+Installs and injects all the required configuration to run cypress tests.
+
+## Quick overview
+
+```
+cd my-app
+npx create-cypress-test 
+npx cypress open
+```
+
+![demo](./demo.gif)
+
+## Package manager
+
+This wizard will automatically determine which package do you use. If `yarn` available as global dependency it will use yarn to install dependencies and create lock file. 
+
+If you need to use `npm` over `yarn` you can do the following
+
+```
+npx create-cypress-tests --use-npm
+```
+
+By the way you can use yarn to run the installation wizard 😉
+
+```
+yarn create cypress tests
+```
+
+## Typescript 
+
+This package will also automatically determine if typescript if available in this project and inject the required typescript configuration for cypress. If you are starting a new project and want to create typescript configuration, please do the following:
+
+```
+npm init
+npm install typescript
+npx create-cypress-tests 
+```
+
+## Configuration 
+
+Here is a list of available configuration options: 
+
+`--use-npm` – use npm if yarn available
+`--ignore-typescript` – will not create typescript configuration if available 
+`--ignore-examples` – will create a 1 empty spec file (`cypress/integration/spec.js`) to start with
+`--component-tests` – will not ask should setup component testing or not
+
+## License
+
+The project is licensed under the terms of [MIT license](../../LICENSE)

npm/create-cypress-tests/__snapshots__/babel.test.ts.js

@@ -0,0 +1,10 @@
+exports['babel installation template correctly generates plugins config 1'] = `
+const preprocessor = require('@cypress/react/plugins/babel');
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+`

npm/create-cypress-tests/__snapshots__/init-component-testing.test.ts.js

@@ -0,0 +1,50 @@
+exports['Injects guessed next.js template cypress.json'] = `
+const preprocessor = require("@cypress/react/plugins/next");
+
+module.exports = (on, config) => {
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+
+`
+
+exports['Injects guessed next.js template plugins/index.js'] = `
+const preprocessor = require("@cypress/react/plugins/next");
+
+module.exports = (on, config) => {
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+
+`
+
+exports['Injects guessed next.js template support/index.js'] = `
+import "@cypress/react/support";
+
+`
+
+exports['Injected overridden webpack template cypress.json'] = `
+const preprocessor = require("@cypress/react/plugins/react-scripts");
+
+module.exports = (on, config) => {
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+
+`
+
+exports['Injected overridden webpack template plugins/index.js'] = `
+const preprocessor = require("@cypress/react/plugins/react-scripts");
+
+module.exports = (on, config) => {
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+
+`
+
+exports['Injected overridden webpack template support/index.js'] = `
+import "./commands.js";
+import "@cypress/react/support";
+
+`

npm/create-cypress-tests/__snapshots__/next.test.ts.js

@@ -0,0 +1,10 @@
+exports['next.js install template correctly generates plugins config 1'] = `
+const preprocessor = require('@cypress/react/plugins/next');
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+`

npm/create-cypress-tests/__snapshots__/react-scripts.test.ts.js

@@ -0,0 +1,10 @@
+exports['create-react-app install template correctly generates plugins config 1'] = `
+const preprocessor = require('@cypress/react/plugins/react-scripts');
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+`

npm/create-cypress-tests/__snapshots__/reactWebpackFile.test.ts.js

@@ -0,0 +1,24 @@
+exports['webpack-file install template correctly generates plugins config when webpack config path is missing 1'] = `
+const preprocessor = require("@cypress/react/plugins/load-webpack");
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  // TODO replace with valid webpack config path
+  config.env.webpackFilename = './webpack.config.js';
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+`
+
+exports['webpack-file install template correctly generates plugins config when webpack config path is provided 1'] = `
+const preprocessor = require("@cypress/react/plugins/load-webpack");
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  config.env.webpackFilename = 'config/webpack.config.js';
+  preprocessor(on, config);
+  return config; // IMPORTANT to return the config object
+};
+`

npm/create-cypress-tests/__snapshots__/rollup.test.ts.js

@@ -0,0 +1,32 @@
+exports['rollup-file install template correctly generates plugins config when webpack config path is missing 1'] = `
+const rollupPreprocessor = require("@bahmutov/cy-rollup");
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  on('file:preprocessor', rollupPreprocessor({
+    // TODO replace with valid rollup config path
+    configFile: 'rollup.config.js'
+  }));
+
+  require('@cypress/code-coverage/task')(on, config);
+
+  return config; // IMPORTANT to return the config object
+};
+`
+
+exports['rollup-file install template correctly generates plugins config when webpack config path is provided 1'] = `
+const rollupPreprocessor = require("@bahmutov/cy-rollup");
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  on('file:preprocessor', rollupPreprocessor({
+    configFile: 'config/rollup.config.js'
+  }));
+
+  require('@cypress/code-coverage/task')(on, config);
+
+  return config; // IMPORTANT to return the config object
+};
+`

npm/create-cypress-tests/__snapshots__/vueCli.test.ts.js

@@ -0,0 +1,11 @@
+exports['vue webpack-file install template correctly generates plugins for vue-cli-service 1'] = `
+const preprocessor = require("@cypress/vue/dist/plugins/webpack");
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  preprocessor(on, config); // IMPORTANT return the config object
+
+  return config;
+};
+`

npm/create-cypress-tests/__snapshots__/vueWebpackFile.test.ts.js

@@ -0,0 +1,24 @@
+exports['vue webpack-file install template correctly generates plugins config when webpack config path is missing 1'] = `
+const {
+  onFilePreprocessor
+} = require('@cypress/vue/dist/preprocessor/webpack');
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  // TODO replace with valid webpack config path
+  on('file:preprocessor', onFilePreprocessor('./webpack.config.js'));
+};
+`
+
+exports['vue webpack-file install template correctly generates plugins config when webpack config path is provided 1'] = `
+const {
+  onFilePreprocessor
+} = require('@cypress/vue/dist/preprocessor/webpack');
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  on('file:preprocessor', onFilePreprocessor('build/webpack.config.js'));
+};
+`

npm/create-cypress-tests/__snapshots__/webpackOptions.test.ts.js

@@ -0,0 +1,29 @@
+exports['webpack-options template correctly generates plugins config 1'] = `
+const webpackPreprocessor = require("@cypress/webpack-preprocessor");
+
+const something = require("something");
+
+module.exports = (on, config) => {
+  const opts = webpackPreprocessor.defaultOptions;
+  const babelLoader = opts.webpackOptions.module.rules[0].use[0]; // add React preset to be able to transpile JSX
+
+  babelLoader.options.presets.push(require.resolve('@babel/preset-react')); // We can also push Babel istanbul plugin to instrument the code on the fly
+  // and get code coverage reports from component tests (optional)
+
+  if (!babelLoader.options.plugins) {
+    babelLoader.options.plugins = [];
+  }
+
+  babelLoader.options.plugins.push(require.resolve('babel-plugin-istanbul')); // in order to mock named imports, need to include a plugin
+
+  babelLoader.options.plugins.push([require.resolve('@babel/plugin-transform-modules-commonjs'), {
+    loose: true
+  }]); // add code coverage plugin
+
+  require('@cypress/code-coverage/task')(on, config);
+
+  on('file:preprocessor', webpackPreprocessor(opts)); // if adding code coverage, important to return updated config
+
+  return config;
+};
+`