fix(component-testing): correct imports for relative paths in cypress…

….json (#16056)

npm/react/cypress/component/advanced/timers/card-spec.js

@@ -8,7 +8,7 @@ it('should select null after timing out', () => {
   const onSelect = cy.stub().as('selected')
 
   mount(<Card onSelect={onSelect} />)
-  cy.get('@selected', { timeout: 5500 }).should('have.been.calledWith', null)
+  cy.get('@selected', { timeout: 6000 }).should('have.been.calledWith', null)
 })
 
 it('should accept selections', () => {

npm/webpack-dev-server/src/loader.ts

@@ -1,8 +1,10 @@
 /* global Cypress */
 /// <reference types="cypress" />
 
+import debugFn from 'debug'
 import * as path from 'path'
 import { CypressCTWebpackContext } from './plugin'
+const debug = debugFn('cypress:webpack-dev-server:webpack')
 
 /**
  * @param {ComponentSpec} file spec to create import string from.
@@ -15,8 +17,8 @@ const makeImport = (file: Cypress.Cypress['spec'], filename: string, chunkName:
   const magicComments = chunkName ? `/* webpackChunkName: "${chunkName}" */` : ''
 
   return `"${filename}": {
-    shouldLoad: () => document.location.pathname.includes(${JSON.stringify(file.relative)}),
-    load: () => import(${JSON.stringify(path.resolve(projectRoot, file.relative))} ${magicComments}),
+    shouldLoad: () => document.location.pathname.includes("${file.absolute}"),
+    load: () => import("${file.absolute}" ${magicComments}),
     chunkName: "${chunkName}",
   }`
 }
@@ -39,6 +41,8 @@ const makeImport = (file: Cypress.Cypress['spec'], filename: string, chunkName:
 function buildSpecs (projectRoot: string, files: Cypress.Cypress['spec'][] = []): string {
   if (!Array.isArray(files)) return `{}`
 
+  debug(`projectRoot: ${projectRoot}, files: ${files.map((f) => f.absolute).join(',')}`)
+
   return `{${files.map((f, i) => {
     return makeImport(f, f.name, `spec-${i}`, projectRoot)
   }).join(',')}}`

npm/webpack-dev-server/src/startServer.ts

@@ -46,12 +46,12 @@ export async function start ({ webpackConfig: userWebpackConfig, options, ...use
 
   debug('starting webpack dev server')
 
-  const webpackDevServerConfig = {
+  const webpackDevServerConfig: WebpackDevServer.Configuration = {
     ...userWebpackConfig.devServer,
     hot: false,
     inline: false,
     publicPath: devServerPublicPathRoute,
-    noInfo: true,
+    noInfo: false,
   }
 
   return new WebpackDevServer(compiler, webpackDevServerConfig)

packages/runner-ct/src/app/RunnerCt.tsx

@@ -81,6 +81,8 @@ const buildNavItems = (eventManager: typeof EventManager, toggleIsSetListOpen: (
   },
 ]
 
+const removeRelativeRegexp = /\.\.\//gi
+
 const RunnerCt = namedObserver('RunnerCt',
   (props: RunnerCtProps) => {
     const searchRef = React.useRef<HTMLInputElement>(null)
@@ -92,7 +94,10 @@ const RunnerCt = namedObserver('RunnerCt',
 
     const runSpec = React.useCallback((file: FileNode) => {
       setActiveIndex(0)
-      const selectedSpec = props.state.specs.find((spec) => spec.absolute.includes(file.relative))
+      // We request an absolute path from the dev server but the spec list displays relative paths
+      // For this reason to match the spec we remove leading relative paths. Eg ../../foo.js -> foo.js.
+      const filePath = file.relative.replace(removeRelativeRegexp, '')
+      const selectedSpec = props.state.specs.find((spec) => spec.absolute.includes(filePath))
 
       if (!selectedSpec) {
         throw Error(`Could not find spec matching ${file.relative}.`)

packages/runner-ct/src/iframe/iframes.jsx

@@ -14,7 +14,7 @@ import styles from '../app/RunnerCt.module.scss'
 import './iframes.scss'
 
 export function getSpecUrl ({ namespace, spec }, prefix = '') {
-  return spec ? `${prefix}/${namespace}/iframes/${spec.relative}` : ''
+  return spec ? `${prefix}/${namespace}/iframes/${spec.absolute}` : ''
 }
 
 @observer

packages/server-ct/test/fixtures/projects/nested-config/component-files/greet.js

@@ -0,0 +1,5 @@
+export function greet() {
+  const el = document.createElement('div')
+  el.textContent = 'Hello world'
+  document.body.appendChild(el)
+}

packages/server-ct/test/fixtures/projects/nested-config/component-files/greet.spec.js

@@ -0,0 +1,6 @@
+import { greet } from './greet'
+
+it('greets', () => {
+  greet()
+  cy.get('div').contains('Hello world')
+})

packages/server-ct/test/fixtures/projects/nested-config/configuration/cypress.json

@@ -0,0 +1,6 @@
+{
+  "component": {
+    "componentFolder": "../component-files",
+    "testFiles": "**/*.spec.js"
+  }
+}

packages/server-ct/test/fixtures/projects/nested-config/configuration/cypress/plugins/index.js

@@ -0,0 +1,7 @@
+const { startDevServer } = require('@cypress/webpack-dev-server')
+
+module.exports = (on, config) => {
+  on('dev-server:start', (options) => startDevServer({ options, webpackConfig: {} }))
+
+  return config
+}

packages/server-ct/test/fixtures/projects/nested-config/package.json

@@ -0,0 +1,6 @@
+{
+  "scripts": {
+    "cy:run": "node ../../../../../../scripts/cypress.js run-ct --project configuration",
+    "cy:open": "node ../../../../../../scripts/cypress.js open-ct --project configuration"
+  }
+}