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'
}
}
})
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With