Merge branch 'develop' into issue-23913

npm/cypress-schematic/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@cypress/schematic-v2.1.0](https://github.com/cypress-io/cypress/compare/@cypress/schematic-v2.0.3...@cypress/schematic-v2.1.0) (2022-10-06)
+
+
+### Bug Fixes
+
+* angular 14.2 mount compilation error ([#23593](https://github.com/cypress-io/cypress/issues/23593)) ([2f337db](https://github.com/cypress-io/cypress/commit/2f337dbfa2bb212754c8fa82e3f4548a2f3a07a4))
+* Detect user-configured browsers ([#23446](https://github.com/cypress-io/cypress/issues/23446)) ([a75d3ec](https://github.com/cypress-io/cypress/commit/a75d3ec81f3405db6721a89875d89cdca0109013))
+
+
+### Features
+
+* _addQuery() ([#23665](https://github.com/cypress-io/cypress/issues/23665)) ([41fc535](https://github.com/cypress-io/cypress/commit/41fc535dca51cda4e40b5d9fc827d8bff534f3d1))
+* **cypress/schematic:** add support for component testing ([#23385](https://github.com/cypress-io/cypress/issues/23385)) ([99562af](https://github.com/cypress-io/cypress/commit/99562af65a10abb0fab211fd97b13f98e2b0f959))
+
 # [@cypress/schematic-v2.1.0](https://github.com/cypress-io/cypress/compare/@cypress/schematic-v2.0.3...@cypress/schematic-v2.1.0) (2022-10-04)
 
 

npm/mount-utils/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@cypress/mount-utils-v2.1.0](https://github.com/cypress-io/cypress/compare/@cypress/mount-utils-v2.0.1...@cypress/mount-utils-v2.1.0) (2022-10-06)
+
+
+### Features
+
+* adding svelte component testing support ([#23553](https://github.com/cypress-io/cypress/issues/23553)) ([f6eaad4](https://github.com/cypress-io/cypress/commit/f6eaad40e1836fa9db87c60defa5ae6f390c8fd8))
+
 # [@cypress/mount-utils-v2.1.0](https://github.com/cypress-io/cypress/compare/@cypress/mount-utils-v2.0.1...@cypress/mount-utils-v2.1.0) (2022-10-04)
 
 

npm/react/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@cypress/react-v6.2.0](https://github.com/cypress-io/cypress/compare/@cypress/react-v6.1.1...@cypress/react-v6.2.0) (2022-10-06)
+
+
+### Features
+
+* adding svelte component testing support ([#23553](https://github.com/cypress-io/cypress/issues/23553)) ([f6eaad4](https://github.com/cypress-io/cypress/commit/f6eaad40e1836fa9db87c60defa5ae6f390c8fd8))
+
 # [@cypress/react-v6.2.0](https://github.com/cypress-io/cypress/compare/@cypress/react-v6.1.1...@cypress/react-v6.2.0) (2022-10-04)
 
 

npm/react18/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [@cypress/react18-v1.1.0](https://github.com/cypress-io/cypress/compare/@cypress/react18-v1.0.1...@cypress/react18-v1.1.0) (2022-10-06)
+
+
+### Bug Fixes
+
+* cypress/react18 rerender ([#23360](https://github.com/cypress-io/cypress/issues/23360)) ([8b8f20e](https://github.com/cypress-io/cypress/commit/8b8f20eec77d4c0a704aee7f7077dc92dbafb93f))
+
+
+### Features
+
+* adding svelte component testing support ([#23553](https://github.com/cypress-io/cypress/issues/23553)) ([f6eaad4](https://github.com/cypress-io/cypress/commit/f6eaad40e1836fa9db87c60defa5ae6f390c8fd8))
+
 # [@cypress/react18-v1.1.0](https://github.com/cypress-io/cypress/compare/@cypress/react18-v1.0.1...@cypress/react18-v1.1.0) (2022-10-04)
 
 

npm/vite-dev-server/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [@cypress/vite-dev-server-v3.3.0](https://github.com/cypress-io/cypress/compare/@cypress/vite-dev-server-v3.2.0...@cypress/vite-dev-server-v3.3.0) (2022-10-06)
+
+
+### Bug Fixes
+
+* Address Vite sourcemap edge cases ([#24063](https://github.com/cypress-io/cypress/issues/24063)) ([e918fc1](https://github.com/cypress-io/cypress/commit/e918fc1a8c1b26b25207e42a6b8a879b0a3e9a2b))
+
+
+### Features
+
+* Disable file watching in component tests in run mode ([#24097](https://github.com/cypress-io/cypress/issues/24097)) ([3e01474](https://github.com/cypress-io/cypress/commit/3e014743909b35f54b697d2a759e4a2c5b67b5b7))
+
 # [@cypress/vite-dev-server-v3.2.0](https://github.com/cypress-io/cypress/compare/@cypress/vite-dev-server-v3.1.1...@cypress/vite-dev-server-v3.2.0) (2022-09-29)
 
 

npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts

@@ -1,5 +1,7 @@
 /// <reference path="../support/e2e.ts" />
 
+import dedent from 'dedent'
+
 describe('Config options', () => {
   it('supports supportFile = false', () => {
     cy.scaffoldProject('vite2.9.1-react')
@@ -75,3 +77,68 @@ describe('Config options', () => {
     })
   })
 })
+
+describe('sourcemaps', () => {
+  it('should be provided for JS and transpiled files', () => {
+    const testContent = dedent`
+      describe('spec file with import', () => {
+        it('should generate uncaught error', () => {
+          throw new Error('uncaught')
+        })
+      
+        it('should generate failed command', () => {
+          cy.get('#does-not-exist', { timeout: 100 })
+        })
+      })
+    `
+
+    cy.scaffoldProject('vite3.0.2-react')
+    cy.openProject('vite3.0.2-react', ['--config-file', 'cypress-vite.config.ts'])
+    cy.startAppServer('component')
+
+    cy.withCtx(async (ctx, o) => {
+      await ctx.actions.file.writeFileInProject(
+        'JsErrorSpec.cy.js',
+        o.testContent,
+      )
+
+      await ctx.actions.file.writeFileInProject(
+        'JsWithImportErrorSpec.cy.js',
+        `import React from 'react';\n\n${o.testContent}`,
+      )
+
+      await ctx.actions.file.writeFileInProject(
+        'JsxErrorSpec.cy.jsx',
+        o.testContent,
+      )
+
+      await ctx.actions.file.writeFileInProject(
+        'TsErrorSpec.cy.ts',
+        `type MyType = { value: string }\n\n${o.testContent}`,
+      )
+
+      await ctx.actions.file.writeFileInProject(
+        'TsxErrorSpec.cy.tsx',
+        `type MyType = { value: string }\n\n${o.testContent}`,
+      )
+    }, { testContent })
+
+    const verifySourcemap = (specName: string, line: number, column: number) => {
+      cy.visitApp()
+      cy.contains(specName).click()
+      cy.waitForSpecToFinish()
+      cy.get('.failed > .num').should('contain', 2)
+      cy.get('.runnable-err-file-path', { timeout: 250 }).should('contain', `${specName}:${line}:${column}`)
+    }
+
+    verifySourcemap('JsErrorSpec.cy.js', 7, 9)
+
+    verifySourcemap('JsWithImportErrorSpec.cy.js', 9, 9)
+
+    verifySourcemap('JsxErrorSpec.cy.jsx', 7, 8)
+
+    verifySourcemap('TsErrorSpec.cy.ts', 9, 8)
+
+    verifySourcemap('TsxErrorSpec.cy.tsx', 9, 8)
+  })
+})

npm/vite-dev-server/src/plugins/cypress.ts

@@ -105,27 +105,6 @@ export const Cypress = (
         return res.end(transformedIndexHtml)
       })
     },
-    transform (code, id, options?) {
-      try {
-        if (/\.js$/i.test(id) && !/\/\/# sourceMappingURL=/i.test(code)) {
-          // The Vite dev server and plugins automatically transpile TS and JSX files, which results in sourcemaps being generated
-          // and included in output. However, Vite serves up `esnext`-compliant Javascript which means many JS files won't be
-          // transpiled and won't supply a sourcemap - this prevents Cypress from providing codeFrames in the event of an error.
-          //
-          // A sourcemap is generated by Vite for JS files (just not included) which is in effect an "identity" sourcemap mapping
-          // 1-to-1 to the output file. We can grab this and pass it along as a sourcemap we want Vite to embed into the output,
-          // giving Cypress a sourcemap to use for codeFrame lookups.
-          // @see https://rollupjs.org/guide/en/#thisgetcombinedsourcemap
-
-          return {
-            code,
-            map: this.getCombinedSourcemap(),
-          }
-        }
-      } catch (_err) {
-        debug('Failed to propagate sourcemap for %s: %o', id, _err)
-      }
-    },
     handleHotUpdate: ({ server, file }) => {
       debug('handleHotUpdate - file', file)
 

npm/vite-dev-server/src/plugins/index.ts

@@ -1,3 +1,5 @@
 export * from './inspect'
 
 export * from './cypress'
+
+export * from './sourcemap'

npm/vite-dev-server/src/plugins/sourcemap.ts

@@ -0,0 +1,51 @@
+import debugFn from 'debug'
+import type { Plugin } from 'vite'
+import type { Vite } from '../getVite'
+
+import type { ViteDevServerConfig } from '../devServer'
+
+const debug = debugFn('cypress:vite-dev-server:plugins:sourcemap')
+
+export const CypressSourcemap = (
+  options: ViteDevServerConfig,
+  vite: Vite,
+): Plugin => {
+  return {
+    name: 'cypress:sourcemap',
+    enforce: 'post',
+    transform (code, id, options?) {
+      try {
+        if (/\.js$/i.test(id) && !/\/\/# sourceMappingURL=/i.test(code)) {
+          /*
+          The Vite dev server and plugins automatically generate sourcemaps for most files, but they are
+          only included in the served files if any transpilation actually occurred (JSX, TS, etc). This
+          means that files that are "pure" JS won't include sourcemaps, so JS spec files that don't require
+          transpilation won't get code frames in the runner.
+
+          A sourcemap for these files is generated (just not served) which is in effect an "identity"
+          sourcemap mapping 1-to-1 to the output file. We can grab this and pass it along as a sourcemap
+          we want Vite to embed into the output, giving Cypress a sourcemap to use for codeFrame lookups.
+          @see https://rollupjs.org/guide/en/#thisgetcombinedsourcemap
+
+          We utilize a 'post' plugin here and manually append the sourcemap content to the code. We *should*
+          be able to pass the sourcemap along using the `map` attribute in the return value, but Babel-based
+          plugins don't work with this which causes sourcemaps to break for files that go through common
+          plugins like `@vitejs/plugin-react`. By manually appending the sourcemap at this point in time
+          Babel-transformed files end up with correct sourcemaps.
+          */
+
+          const sourcemap = this.getCombinedSourcemap()
+
+          code += `\n//# sourceMappingURL=${sourcemap.toUrl()}`
+
+          return {
+            code,
+            map: { mappings: '' },
+          }
+        }
+      } catch (_err) {
+        debug('Failed to propagate sourcemap for %s: %o', id, _err)
+      }
+    },
+  }
+}

npm/vite-dev-server/src/resolveConfig.ts

@@ -11,12 +11,12 @@ import path from 'path'
 
 import { configFiles } from './constants'
 import type { ViteDevServerConfig } from './devServer'
-import { Cypress, CypressInspect } from './plugins/index'
+import { Cypress, CypressInspect, CypressSourcemap } from './plugins/index'
 import type { Vite } from './getVite'
 
 const debug = debugFn('cypress:vite-dev-server:resolve-config')
 
-export const createViteDevServerConfig = async (config: ViteDevServerConfig, vite: Vite) => {
+export const createViteDevServerConfig = async (config: ViteDevServerConfig, vite: Vite): Promise<InlineConfig> => {
   const { specs, cypressConfig, viteConfig: viteOverrides } = config
   const root = cypressConfig.projectRoot
   const { default: findUp } = await importModule('find-up')
@@ -87,9 +87,21 @@ export const createViteDevServerConfig = async (config: ViteDevServerConfig, vit
     plugins: [
       Cypress(config, vite),
       CypressInspect(config),
+      CypressSourcemap(config, vite),
     ].filter((p) => p != null),
   }
 
+  if (config.cypressConfig.isTextTerminal) {
+    viteBaseConfig.server = {
+      ...(viteBaseConfig.server || {}),
+      // Disable file watching and HMR when executing tests in `run` mode
+      watch: {
+        ignored: '**/*',
+      },
+      hmr: false,
+    }
+  }
+
   let resolvedOverrides: UserConfig = {}
 
   if (typeof viteOverrides === 'function') {

npm/vite-dev-server/test/resolveConfig.spec.ts

@@ -55,8 +55,8 @@ describe('resolveConfig', function () {
 
       const viteConfig = await createViteDevServerConfig(viteDevServerConfig, vite)
 
-      expect(viteConfig.plugins).to.have.lengthOf(1)
-      expect(viteConfig.plugins[0].name).to.equal('cypress:main')
+      expect(viteConfig.plugins).to.have.lengthOf(2)
+      expect(viteConfig.plugins.map((plugin) => plugin.name)).not.to.contain('cypress:inspect')
     })
 
     context('with CYPRESS_INTERNAL_VITE_INSPECT provided', () => {
@@ -74,8 +74,8 @@ describe('resolveConfig', function () {
 
         const viteConfig = await createViteDevServerConfig(viteDevServerConfig, vite)
 
-        expect(viteConfig.plugins).to.have.lengthOf(2)
-        expect(viteConfig.plugins[1].name).to.equal('cypress:inspect')
+        expect(viteConfig.plugins).to.have.lengthOf(3)
+        expect(viteConfig.plugins.map((plugin) => plugin.name)).to.contain('cypress:inspect')
       })
 
       it('should not add inspect plugin if not installed', async () => {
@@ -84,9 +84,35 @@ describe('resolveConfig', function () {
 
         const viteConfig = await createViteDevServerConfig(viteDevServerConfig, vite)
 
-        expect(viteConfig.plugins).to.have.lengthOf(1)
-        expect(viteConfig.plugins[0].name).to.equal('cypress:main')
+        expect(viteConfig.plugins).to.have.lengthOf(2)
+        expect(viteConfig.plugins.map((plugin) => plugin.name)).not.to.contain('cypress:inspect')
       })
     })
   })
+
+  describe('file watching', () => {
+    let viteDevServerConfig: ViteDevServerConfig
+
+    beforeEach(async () => {
+      const projectRoot = await scaffoldSystemTestProject('vite-inspect')
+
+      viteDevServerConfig = getViteDevServerConfig(projectRoot)
+    })
+
+    it('should be disabled in run mode', async () => {
+      viteDevServerConfig.cypressConfig.isTextTerminal = true
+      const viteConfig = await createViteDevServerConfig(viteDevServerConfig, vite)
+
+      expect(viteConfig.server?.watch?.ignored).to.eql('**/*')
+      expect(viteConfig.server?.hmr).to.be.false
+    })
+
+    it('uses defaults in open mode', async () => {
+      viteDevServerConfig.cypressConfig.isTextTerminal = false
+      const viteConfig = await createViteDevServerConfig(viteDevServerConfig, vite)
+
+      expect(viteConfig.server?.watch?.ignored).to.be.undefined
+      expect(viteConfig.server?.hmr).to.be.undefined
+    })
+  })
 })

npm/vue/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [@cypress/vue-v4.2.0](https://github.com/cypress-io/cypress/compare/@cypress/vue-v4.1.0...@cypress/vue-v4.2.0) (2022-10-06)
+
+
+### Bug Fixes
+
+* fix regression in npm/vue ([#23954](https://github.com/cypress-io/cypress/issues/23954)) ([78779a2](https://github.com/cypress-io/cypress/commit/78779a2db13ca6555a6b830dbabeefd3d37bbfe5))
+* **npm/vue:** update types ([#23890](https://github.com/cypress-io/cypress/issues/23890)) ([eb8ae02](https://github.com/cypress-io/cypress/commit/eb8ae02b61304d034136f7627da1ab23537e3ba4))
+
+
+### Features
+
+* adding svelte component testing support ([#23553](https://github.com/cypress-io/cypress/issues/23553)) ([f6eaad4](https://github.com/cypress-io/cypress/commit/f6eaad40e1836fa9db87c60defa5ae6f390c8fd8))
+
 # [@cypress/vue-v4.2.0](https://github.com/cypress-io/cypress/compare/@cypress/vue-v4.1.0...@cypress/vue-v4.2.0) (2022-10-04)
 
 

npm/vue2/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@cypress/vue2-v1.1.0](https://github.com/cypress-io/cypress/compare/@cypress/vue2-v1.0.2...@cypress/vue2-v1.1.0) (2022-10-06)
+
+
+### Features
+
+* adding svelte component testing support ([#23553](https://github.com/cypress-io/cypress/issues/23553)) ([f6eaad4](https://github.com/cypress-io/cypress/commit/f6eaad40e1836fa9db87c60defa5ae6f390c8fd8))
+
 # [@cypress/vue2-v1.1.0](https://github.com/cypress-io/cypress/compare/@cypress/vue2-v1.0.2...@cypress/vue2-v1.1.0) (2022-10-04)
 
 

npm/webpack-dev-server/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [@cypress/webpack-dev-server-v2.3.0](https://github.com/cypress-io/cypress/compare/@cypress/webpack-dev-server-v2.2.0...@cypress/webpack-dev-server-v2.3.0) (2022-10-06)
+
+
+### Bug Fixes
+
+* allow asynchronous vue cli init phase ([#23936](https://github.com/cypress-io/cypress/issues/23936)) ([6a40936](https://github.com/cypress-io/cypress/commit/6a40936604ae24b0b40996692c4a03e5a3c1c9a2))
+* **angular:** set webpack base so angular assets load ([#24106](https://github.com/cypress-io/cypress/issues/24106)) ([c186783](https://github.com/cypress-io/cypress/commit/c18678381ca3ab35c4ab91fdf98b5c8cf537bd21))
+* force Webpack to emit assets on error ([#23844](https://github.com/cypress-io/cypress/issues/23844)) ([466be9f](https://github.com/cypress-io/cypress/commit/466be9f1f0cbb843684361a9900832814353e3c0))
+* support type: module in Node.js 16.17.0+ and 18.6.0+ ([#23637](https://github.com/cypress-io/cypress/issues/23637)) ([b6dad0a](https://github.com/cypress-io/cypress/commit/b6dad0a674279936a9816939963bbf129647cee7))
+* **webpack-dev-server:** add custom project config to handler ([a07a2a1](https://github.com/cypress-io/cypress/commit/a07a2a118d7b62b90e790ef475c86959ae894b3b))
+* **webpack-dev-server:** handle polyfills array for upcoming angular 15 change ([#24064](https://github.com/cypress-io/cypress/issues/24064)) ([0976034](https://github.com/cypress-io/cypress/commit/097603422535f88aed56b651824d0a3a9d5e81ff))
+
+
+### Features
+
+* adding svelte component testing support ([#23553](https://github.com/cypress-io/cypress/issues/23553)) ([f6eaad4](https://github.com/cypress-io/cypress/commit/f6eaad40e1836fa9db87c60defa5ae6f390c8fd8))
+* allow vite/webpack config to be an async function ([#23605](https://github.com/cypress-io/cypress/issues/23605)) ([4c647f6](https://github.com/cypress-io/cypress/commit/4c647f6d5b0f58a797b50436e63c645418bc07ac))
+* CT stack traces ([#23916](https://github.com/cypress-io/cypress/issues/23916)) ([bf590eb](https://github.com/cypress-io/cypress/commit/bf590eba3f1cf46b04f6a1252e51da5c5a3dc7c2))
+* Disable file watching in component tests in run mode ([#24097](https://github.com/cypress-io/cypress/issues/24097)) ([3e01474](https://github.com/cypress-io/cypress/commit/3e014743909b35f54b697d2a759e4a2c5b67b5b7))
+
 # [@cypress/webpack-dev-server-v2.3.0](https://github.com/cypress-io/cypress/compare/@cypress/webpack-dev-server-v2.2.0...@cypress/webpack-dev-server-v2.3.0) (2022-10-04)