fix(cypress/webpack-dev-server): correct path for indexHtmlFile (#27320)

lmiller1990 · web-flow · commit 53fd537a0486 · 2023-08-04T14:54:38.000+10:00
* fix: correct path for indexHtmlt

* changelog
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -20,6 +20,7 @@ _Released 07/20/2023_
 - Fixed an issue where commands would fail with the error `must only be invoked from the spec file or support file` if their arguments were mutated. Fixes [#27200](https://github.com/cypress-io/cypress/issues/27200).
 - Fixed an issue where `cy.writeFile()` would erroneously fail with the error `cy.writeFile() must only be invoked from the spec file or support file`. Fixes [#27097](https://github.com/cypress-io/cypress/issues/27097).
 - Fixed an issue where web workers could not be created within a spec. Fixes [#27298](https://github.com/cypress-io/cypress/issues/27298).
+- Fixed an issue where having `cypress.config` in a nested directory would cause problems with locating the `component-index.html` file when using component testing. Fixes [#26400](https://github.com/cypress-io/cypress/issues/26400).
 
 ## 12.17.1
 
diff --git a/npm/webpack-dev-server/cypress/e2e/webpack-dev-server.cy.ts b/npm/webpack-dev-server/cypress/e2e/webpack-dev-server.cy.ts
@@ -12,6 +12,17 @@ describe('Config options', () => {
     cy.get('.passed > .num').should('contain', 1)
   })
 
+  it('supports nested config', () => {
+    cy.scaffoldProject('webpack-react-nested-config')
+    cy.openProject('webpack-react-nested-config', ['--config-file', 'cypress/cypress.config.js'])
+    cy.startAppServer('component')
+
+    cy.visitApp()
+    cy.contains('foo.cy.js').click()
+    cy.waitForSpecToFinish()
+    cy.get('.passed > .num').should('contain', 1)
+  })
+
   it('supports @cypress/webpack-dev-server', () => {
     cy.scaffoldProject('webpack5_wds4-react')
     cy.openProject('webpack5_wds4-react', ['--config-file', 'cypress-webpack-dev-server-function.config.ts'])
diff --git a/npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts b/npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts
@@ -78,7 +78,7 @@ export function makeCypressWebpackConfig (
     },
     plugins: [
       new (HtmlWebpackPlugin as typeof import('html-webpack-plugin-5'))({
-        template: indexHtmlFile,
+        template: indexHtmlFile ? path.join(projectRoot, indexHtmlFile) : undefined,
         // Angular generates all of it's scripts with <script type="module">. Live-reloading breaks without this option.
         // We need to manually set the base here to `/__cypress/src/` so that static assets load with our proxy
         ...(framework === 'angular' ? { scriptLoading: 'module', base: '/__cypress/src/' } : {}),
diff --git a/system-tests/projects/webpack-react-nested-config/cypress/cypress.config.js b/system-tests/projects/webpack-react-nested-config/cypress/cypress.config.js
@@ -0,0 +1,10 @@
+const { devServer } = require('@cypress/webpack-dev-server')
+
+module.exports = {
+  component: {
+    supportFile: false,
+    devServer: (args) => {
+      return devServer({ ...args, webpackConfig: {} })
+    },
+  },
+}
diff --git a/system-tests/projects/webpack-react-nested-config/cypress/support/component-index.html b/system-tests/projects/webpack-react-nested-config/cypress/support/component-index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div data-cy-root></div> 
+</body>
+</html>
diff --git a/system-tests/projects/webpack-react-nested-config/package.json b/system-tests/projects/webpack-react-nested-config/package.json
@@ -0,0 +1,7 @@
+{
+  "devDependencies": {
+    "@cypress/webpack-dev-server": "file:../../../npm/webpack-dev-server",
+    "webpack": "^5",
+    "webpack-dev-server": "^4"
+  }
+}
diff --git a/system-tests/projects/webpack-react-nested-config/src/foo.cy.js b/system-tests/projects/webpack-react-nested-config/src/foo.cy.js
@@ -0,0 +1,3 @@
+it('renders hello world', () => {
+  expect(1).to.eq(1)
+})
diff --git a/system-tests/projects/webpack-react-nested-config/yarn.lock b/system-tests/projects/webpack-react-nested-config/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+it('renders hello world', () => {`
	`2`	`+ expect(1).to.eq(1)`
	`3`	`+})`