Trying to run a "Hello world" component test with simplest HTTP dev server and no framework

[vfonic]

Hi,

I've been trying to setup the simplest possible Cypress component test with no bundler, no framework. Just a simple HTTP server, serving plain ol' HTML files - HTML layout file + mounted HTML component.

I'm also looking to be able to load CSS and JS files. Again, no magic here, just plain ol' CSS and plain ol' JS that listens to DOMContentLoaded.

I've added a simple devServer and it successfully loads component-index.html layout file. The spec files are correctly found as well. However, mount function is never called.

When I click on spec name in Cypress/Chrome, such as simple-test.cy.js, the test opens and hangs on Your tests are loading....

Screenshots

Test selection	Running tests

Here's my implementation:

cypress.config.js

// cypress.config.js

const { defineConfig } = require("cypress")
const { startDevServer } = require("./cypress/support/dev-server")

module.exports = defineConfig({
  component: {
    async devServer({ specs, cypressConfig, devServerEvents }) {
      const { port, close } = await startDevServer(specs, cypressConfig, devServerEvents)
      return { port, close }
    },
  },
})

cypress/support/dev-server.js

const http = require("http")
const fs = require("fs")
const path = require("path")

async function startDevServer(specs, cypressConfig, devServerEvents) {
  const port = 3333
  const indexHtmlPath = cypressConfig.indexHtmlFile

  let indexHtmlContent = fs.readFileSync(indexHtmlPath, "utf8")

  const clientScript = `
    <script type="module">
      import '/cypress/support/component.js';
    </script>
  `
  indexHtmlContent = indexHtmlContent.replace("</body>", `${clientScript}</body>`)

  const server = http.createServer((req, res) => {
    const url = new URL(req.url, `http://localhost:${port}`)
    console.log(`Request: ${req.method} ${url.pathname}`)

    res.setHeader("Access-Control-Allow-Origin", "*")
    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
    res.setHeader("Access-Control-Allow-Headers", "Content-Type")

    if (req.method === "OPTIONS") {
      res.writeHead(200)
      res.end()
      return
    }

    if (url.pathname === cypressConfig.devServerPublicPathRoute + "/index.html") {
      res.setHeader("Content-Type", "text/html")
      res.writeHead(200)
      res.end(indexHtmlContent)
      return
    }

    if (url.pathname.startsWith("/cypress/") || url.pathname.startsWith("/test/")) {
      let filePath = path.join(__dirname, "..", "..", url.pathname)

      try {
        if (fs.existsSync(filePath)) {
          const content = fs.readFileSync(filePath, "utf8")
          const ext = path.extname(filePath)
          const contentTypeMap = {
            ".js": "application/javascript",
            ".css": "text/css",
            ".html": "text/html",
          }
          const contentType = contentTypeMap[ext] || "text/plain"

          res.setHeader("Content-Type", contentType)
          res.writeHead(200)
          res.end(content)
          console.log(`Served ${url.pathname} (200)`)
        } else {
          res.writeHead(404)
          res.end("File not found")
          console.log(`File not found: ${url.pathname} (404)`)
        }
      } catch (error) {
        res.writeHead(500)
        res.end("Internal server error")
        console.log(`Error serving ${url.pathname}: ${error.message}`)
      }
      return
    }

    res.writeHead(404)
    res.end("Not found")
    console.log(`Not found: ${url.pathname} (404)`)
  })

  await new Promise((resolve, reject) => {
    server.listen(port, err => {
      if (err) {
        reject(err)
        return
      }

      console.log(`Custom dev server running on http://localhost:${port}`)

      // Notify Cypress that the dev server is ready and compilation is successful
      if (devServerEvents && typeof devServerEvents.emit === "function") {
        devServerEvents.emit("dev-server:start", { port })
        // Emit compile success to tell Cypress the server is ready
        devServerEvents.emit("dev-server:compile:success")
      }

      resolve()
    })
  })

  return {
    port,
    close: () => {
      return new Promise(resolveClose => {
        server.close(() => {
          console.log("Custom dev server closed")
          resolveClose()
        })
      })
    },
  }
}

module.exports = { startDevServer }

cypress/support/commands.js

// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

import { mount } from "./component.js"

Cypress.Commands.add("mount", mount)

cypress/support/component.js

// ***********************************************************
// This example support/component.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import "./commands.js"

// Mount function for HTML components
function mount(componentPath, options = {}) {
  const { log = true } = options

  console.log("Mount function called with:", componentPath)

  return cy.request(`http://localhost:3333/${componentPath}`).then(response => {
    console.log("Got response from server")
    cy.get("[data-cy-root]").then(el => {
      console.log("Setting innerHTML")
      el[0].innerHTML = response.body
    })

    if (log) {
      Cypress.log({
        name: "mount",
        message: `Mounted component: ${componentPath}`,
        consoleProps: () => ({
          componentPath,
          options,
        }),
      })
    }
  })
}

// Register mount as a Cypress command
// Cypress.Commands.add("mount", mount)

// Export for direct import usage
export { mount }

cypress/component/simple-test.cy.js

describe("Simple Test", () => {
  it("should mount basic HTML", () => {
    // Just test that we can visit the iframe URL
    cy.get("[data-cy-root]").should("exist")
  })
})

cypress/support/component-index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Components App</title>
  </head>
  <body>
    <h1>Component Index</h1>
    <div data-cy-root></div>
  </body>
</html>

mount function is never called, nor is anything inside the cypress/component/simple-test.cy.js (describe is not called).

Cypress should raise some error in this case. How can I debug this?

Thank you!

[vfonic]

I've found the issue.

I followed the documentation and added client-script.js. The issue is that documentation shows incorrect client script implementation here: https://docs.cypress.io/app/component-testing/component-framework-configuration#Custom-Dev-Server

Cypress documentation example implementation of client-script.js

const CypressInstance = (window.Cypress = parent.Cypress)
const devServerPublicPathRoute = CypressInstance.config(
  'devServerPublicPathRoute'
)

let importPromise = Promise.resolve()

// If you do not bundle your support file along with the tests,
// you need to add a separate import statement for the support file.
const supportFilePath = CypressInstance.config('supportFile')
if (supportFilePath) {
  const relative = supportFilePath.replace(
    CypressInstance.config('projectRoot'),
    ''
  )
  importPromise = importPromise.then(
    () => import(`${devServerPublicPathRoute}${relative}`)
  )
}

// load the spec - you can extend the load function to also load css
const { relative } = CypressInstance.spec
importPromise = importPromise.then(
  () => import(`${devServerPublicPathRoute}/${relative}`)
)

// trigger loading the imports
CypressInstance.onSpecWindow(window, importPromise)

// then start the test process
CypressInstance.action('app:window:before:load', window)

The above implementation doesn't work, because importPromise is a promise, while Cypress expects an array:

Fixed example client-script.js implementation

const CypressInstance = (window.Cypress = parent.Cypress)
const devServerPublicPathRoute = CypressInstance.config("devServerPublicPathRoute")

const importPromises = []

// If you do not bundle your support file along with the tests,
// you need to add a separate import statement for the support file.
const supportFilePath = CypressInstance.config("supportFile")
if (supportFilePath) {
  const relative = supportFilePath.replace(CypressInstance.config("projectRoot"), "")
  importPromises.push(() => import(`${devServerPublicPathRoute}${relative}`))
}

// load the spec - you can extend the load function to also load css
const { relative } = CypressInstance.spec
importPromises.push(() => import(`${devServerPublicPathRoute}/${relative}`))


// trigger loading the imports
CypressInstance.onSpecWindow(window, importPromises)

// then start the test process
CypressInstance.action("app:window:before:load", window)

Here's the diff

const CypressInstance = (window.Cypress = parent.Cypress)
const devServerPublicPathRoute = CypressInstance.config("devServerPublicPathRoute")

- let importPromise = Promise.resolve()
+ const importPromises = []

// If you do not bundle your support file along with the tests,
// you need to add a separate import statement for the support file.
const supportFilePath = CypressInstance.config("supportFile")
if (supportFilePath) {
  const relative = supportFilePath.replace(CypressInstance.config("projectRoot"), "")
-   importPromise = importPromise.then(() => import(`${devServerPublicPathRoute}${relative}`))
+   importPromises.push(() => import(`${devServerPublicPathRoute}${relative}`))
}

// load the spec - you can extend the load function to also load css
const { relative } = CypressInstance.spec
- importPromise = importPromise.then(() => import(`${devServerPublicPathRoute}/${relative}`))
+ importPromises.push(() => import(`${devServerPublicPathRoute}/${relative}`))

// trigger loading the imports
- CypressInstance.onSpecWindow(window, importPromise)
+ CypressInstance.onSpecWindow(window, importPromises)

// then start the test process
CypressInstance.action("app:window:before:load", window)