feat: adding svelte component testing support (#23553)

Co-authored-by: Jessica Sachs <jess@jessicasachs.io>
Co-authored-by: Rocky <25568640+rockindahizzy@users.noreply.github.com>

cli/.gitignore

@@ -19,4 +19,5 @@ vue
 vue2
 react*
 mount-utils
-angular
+angular
+svelte

cli/package.json

@@ -108,7 +108,8 @@
     "react",
     "vue2",
     "react18",
-    "angular"
+    "angular",
+    "svelte"
   ],
   "bin": {
     "cypress": "bin/cypress"
@@ -155,6 +156,11 @@
       "import": "./angular/dist/index.js",
       "require": "./angular/dist/index.js",
       "types": "./angular/dist/index.d.ts"
+    },
+    "./svelte": {
+      "import": "./svelte/dist/cypress-svelte.esm-bundler.js",
+      "require": "./svelte/dist/cypress-svelte.cjs.js",
+      "types": "./svelte/dist/index.d.ts"
     }
   },
   "workspaces": {

cli/scripts/post-build.js

@@ -13,6 +13,7 @@ const npmModulesToCopy = [
   'vue',
   'vue2',
   'angular',
+  'svelte',
 ]
 
 npmModulesToCopy.forEach((folder) => {

cli/types/cypress.d.ts

@@ -3058,11 +3058,11 @@ declare namespace Cypress {
 
   type DevServerConfigOptions = {
     bundler: 'webpack'
-    framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app' | 'next'
+    framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app' | 'next' | 'svelte'
     webpackConfig?: PickConfigOpt<'webpackConfig'>
   } | {
     bundler: 'vite'
-    framework: 'react' | 'vue'
+    framework: 'react' | 'vue' | 'svelte'
     viteConfig?: Omit<Exclude<PickConfigOpt<'viteConfig'>, undefined>, 'base' | 'root'>
   } | {
     bundler: 'webpack',

npm/angular/package.json

@@ -6,7 +6,7 @@
   "main": "dist/index.js",
   "scripts": {
     "prebuild": "rimraf dist",
-    "build": "rollup -c rollup.config.js",
+    "build": "rollup -c rollup.config.mjs",
     "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
     "build-prod": "yarn build",
     "check-ts": "tsc --noEmit"
@@ -16,8 +16,7 @@
     "@angular/common": "^14.0.6",
     "@angular/core": "^14.0.6",
     "@angular/platform-browser-dynamic": "^14.0.6",
-    "@rollup/plugin-node-resolve": "^11.1.1",
-    "rollup-plugin-typescript2": "^0.29.0",
+    "@cypress/mount-utils": "0.0.0-development",
     "typescript": "^4.7.4",
     "zone.js": "~0.11.4"
   },

npm/angular/rollup.config.mjs

@@ -0,0 +1,14 @@
+import { createEntries } from '@cypress/mount-utils/create-rollup-entry.mjs'
+
+const config = {
+  external: [
+    '@angular/core',
+    '@angular/core/testing',
+    '@angular/common',
+    '@angular/platform-browser-dynamic/testing',
+    'zone.js',
+    'zone.js/testing',
+  ],
+}
+
+export default createEntries({ formats: ['es'], input: 'src/index.ts', config })

npm/mount-utils/create-rollup-entry.mjs

@@ -0,0 +1,71 @@
+// CommonJS to easily share across packages
+import ts from 'rollup-plugin-typescript2'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import _ from 'lodash'
+import { readFileSync } from 'fs'
+
+const pkg = JSON.parse(readFileSync('./package.json'))
+
+/** @type {(options: { formats: string[], input: string, config: {} }) => []} */
+export function createEntries (options) {
+  const {
+    formats,
+    input,
+    config = {},
+  } = options
+
+  const banner = `
+/**
+ * ${pkg.name} v${pkg.version}
+ * (c) ${new Date().getFullYear()} Cypress.io
+ * Released under the MIT License
+ */
+`
+
+  return formats.map((format) => {
+    const baseConfig = {
+      input,
+      plugins: [
+        resolve({ preferBuiltins: true }),
+        commonjs(),
+        ts({
+          check: format === 'es',
+          tsconfigOverride: {
+            compilerOptions: {
+              declaration: format === 'es',
+              target: 'es6',
+              module: format === 'cjs' ? 'es2015' : 'esnext',
+            },
+            exclude: ['tests'],
+          },
+        }),
+      ],
+      output: {
+        banner,
+        name: 'CypressReact',
+        file: pkg.unpkg,
+        format,
+      },
+    }
+
+    const finalConfig = _.mergeWith({}, baseConfig, config, (objValue, srcValue) => {
+      if (_.isArray(objValue)) {
+        return objValue.concat(srcValue)
+      }
+    })
+
+    if (format === 'es') {
+      finalConfig.output.file = pkg.module
+    }
+
+    if (format === 'cjs') {
+      finalConfig.output.file = pkg.main
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(`Building ${format}: ${finalConfig.output.file}`)
+
+    return finalConfig
+  })
+}

npm/mount-utils/package.json

@@ -12,6 +12,10 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.1.1",
+    "rollup": "^2.38.5",
+    "rollup-plugin-typescript2": "^0.29.0",
     "typescript": "^4.7.4"
   },
   "files": [

npm/react/package.json

@@ -4,7 +4,7 @@
   "description": "Test React components using Cypress",
   "main": "dist/cypress-react.cjs.js",
   "scripts": {
-    "build": "rimraf dist && rollup -c rollup.config.js",
+    "build": "rimraf dist && rollup -c rollup.config.mjs",
     "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
     "build-prod": "yarn build",
     "cy:open": "node ../../scripts/cypress.js open --component",
@@ -16,8 +16,6 @@
   },
   "devDependencies": {
     "@cypress/mount-utils": "0.0.0-development",
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-node-resolve": "^11.1.1",
     "@types/semver": "7.3.9",
     "@vitejs/plugin-react": "1.3.1",
     "axios": "0.21.2",
@@ -27,8 +25,6 @@
     "react-dom": "16.8.6",
     "react-router": "6.0.0-alpha.1",
     "react-router-dom": "6.0.0-alpha.1",
-    "rollup": "^2.38.5",
-    "rollup-plugin-typescript2": "^0.29.0",
     "semver": "^7.3.2",
     "typescript": "^4.7.4",
     "vite": "3.0.3",

npm/react/rollup.config.mjs

@@ -0,0 +1,18 @@
+import { createEntries } from '@cypress/mount-utils/create-rollup-entry.mjs'
+
+const config = {
+  external: [
+    'react',
+    'react-dom',
+    'react-dom/client',
+  ],
+  output: {
+    globals: {
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      'react-dom/client': 'ReactDOM/client',
+    },
+  },
+}
+
+export default createEntries({ formats: ['es', 'cjs'], input: 'src/index.ts', config })

npm/react18/package.json

@@ -4,7 +4,7 @@
   "description": "Test React components using Cypress",
   "main": "dist/cypress-react.cjs.js",
   "scripts": {
-    "build": "rimraf dist && rollup -c rollup.config.js",
+    "build": "rimraf dist && rollup -c rollup.config.mjs",
     "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
     "build-prod": "yarn build",
     "watch": "yarn build --watch --watch.exclude ./dist/**/*"

npm/react18/rollup.config.mjs

@@ -0,0 +1,3 @@
+import rollupConfig from '@cypress/react/rollup.config.mjs'
+
+export default rollupConfig

npm/svelte/.eslintrc

@@ -0,0 +1,17 @@
+{
+  "plugins": [
+    "cypress"
+  ],
+  "extends": [
+    "plugin:@cypress/dev/tests"
+  ],
+  "env": {
+    "cypress/globals": true
+  },
+  "rules": {
+    "mocha/no-global-tests": "off",
+    "no-unused-vars": "off",
+    "no-console": "off",
+    "@typescript-eslint/no-unused-vars": "off"
+  }
+}

npm/svelte/.npmrc

@@ -0,0 +1,3 @@
+save-exact=true
+progress=false
+package-lock=true

npm/svelte/.releaserc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  ...require('../../.releaserc.base'),
+  branches: [
+    // this one releases v3 on master on the latest channel
+    'master',
+  ],
+}