Component testing error loading spec - Cannot GET /__cypress/src/index.html

user_19605350 0
Viewed 397

I've just started using Cypress component tests with a NextJS app.

I believe I've followed all the steps given in the docs, but I'm getting an error when loading the spec.

Cannot GET /__cypress/src/index.html

The specs pane is forever on "Your tests are loading", and the console has a 404 error on the spec itself.

I checked all artifacts against the Cypress example app, can't see a difference.

cypress.config.js

import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack'
    }
  }
})
cypress
1 Answers

I had this recently when adding imports into cypress/support/component-index.html.

Essentially, any errors that happen in this file are not handled gracefully, or even reported properly.

Check the contents of the file by opening it with a server and checking the console for errors.

The standard content of the file is

<!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>
    <div data-cy-root></div>
  </body>
</html>

I would keep this with the default HTML if possible, and try adding scripts, styles etc in the test itself (where error messages are better).

user_169977070
Related