New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add support of Next.JS 14 #28185
Comments
Updating the Next.js npm i next@latest react@latest react-dom@latest eslint-config-next@latest to Next.js npx cypress run --component runs successfully and warns about compatibility (corresponding to the message in the original post above ^^).
A fresh installation of Next.js npx create-next-app
|
This comment was marked as outdated.
This comment was marked as outdated.
Definitely agree. I created cypress-io/cypress-docker-images#989 to support this for us using the latest 18.x version. Let me know if there's someone who can help merge this in |
|
This is not true for our apps. End to end testing is also failing. I provided some reproductions above, but if they are not enough, I can try to find the time to make more reproductions. But to be clear, this is not only affecting Component Testing. |
Many thanks for your feedback and so I've deleted my statement. I couldn't see any reproductions from you in this thread. Maybe you could describe example errors you're seeing? |
This comment was marked as resolved.
This comment was marked as resolved.
Right yeah, to be clear, it's also a problem for any other TypeScript projects (non-Next.js projects) using |
The demo E2E Next.js This example does not cause a problem because it does not use TypeScript. It is based on following the instructions in that uses the following command to create the Next.js demo project: npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter" |
Yeah, the issues described above are about Next.js TypeScript projects. |
This PR updates the testing guides to use App Router and TypeScript, also updates `/examples` to show `app` and `pages` examples. ## Overview - [x] Create a new "Testing" section that is shared between `app` and `pages`. - [x] Explain the differences between E2E, unit testing, component testing, etc. - [x] Recommend E2E for `async` components as currently none of the tools support it. - [x] Update setup guides for **Cypress**, **Playwright**, and **Jest** with latest config options, and examples for `app` and `pages`. - [x] Add new guide for **Vitest** - [x] Clean up `/examples`: use TS, show `app` and `pages` examples, match docs config ## Cypress - [x] E2E Tests - [x] Component Testing - [x] Client Components - [x] Server Components - [ ] `async` components **Blockers:** - TS: `Option 'bundler' can only be used when 'module' is set to 'es2015' or later`. In **tsconfig.json** compilerOptions, Next.js uses "moduleResolution": "bundler", changing it to "node" fixes the issue but it can have repercussions. - cypress-io/cypress#27731 - Version 14 is currently not supported for component testing - cypress-io/cypress#28185 ## Playwright - [x] E2E Tests ## Jest - [x] Unit Testing - [x] Client Components - [x] Server Components - [ ] `async` components: testing-library/react-testing-library#1209 - [x] 'server-only': #54891 - [x] Snapshot Testing **Blockers:** - TS: testing-library/jest-dom#546 - None of the solutions in the issue work with Next.js v14.0.4 and TS v5 ## Vitest - [x] Unit Testing - [x] Client Components - [x] Server Components - [ ] `async` components - [x] 'server-only' - [x] Update vitest example - [x] Handles CSS, and CSS modules imports - [x] Handles next/image ## Other - #47448 - #47299
You can click on |
Can we please rename/update this issue/warning to clarify it's an incompatibility that only affects TypeScript projects? Alternatively, it could be marked as a duplicate of #27731 if the warning is fixed or considered complete. I understand this is a common issue since TypeScript is enabled by default, but there are workarounds, and it takes a bit of reading to understand what's supported. |
cypress/packages/scaffold-config/src/dependencies.ts Lines 91 to 98 in d6f356f
|
This PR updates the testing guides to use App Router and TypeScript, also updates `/examples` to show `app` and `pages` examples. ## Overview - [x] Create a new "Testing" section that is shared between `app` and `pages`. - [x] Explain the differences between E2E, unit testing, component testing, etc. - [x] Recommend E2E for `async` components as currently none of the tools support it. - [x] Update setup guides for **Cypress**, **Playwright**, and **Jest** with latest config options, and examples for `app` and `pages`. - [x] Add new guide for **Vitest** - [x] Clean up `/examples`: use TS, show `app` and `pages` examples, match docs config ## Cypress - [x] E2E Tests - [x] Component Testing - [x] Client Components - [x] Server Components - [ ] `async` components **Blockers:** - TS: `Option 'bundler' can only be used when 'module' is set to 'es2015' or later`. In **tsconfig.json** compilerOptions, Next.js uses "moduleResolution": "bundler", changing it to "node" fixes the issue but it can have repercussions. - cypress-io/cypress#27731 - Version 14 is currently not supported for component testing - cypress-io/cypress#28185 ## Playwright - [x] E2E Tests ## Jest - [x] Unit Testing - [x] Client Components - [x] Server Components - [ ] `async` components: testing-library/react-testing-library#1209 - [x] 'server-only': vercel#54891 - [x] Snapshot Testing **Blockers:** - TS: testing-library/jest-dom#546 - None of the solutions in the issue work with Next.js v14.0.4 and TS v5 ## Vitest - [x] Unit Testing - [x] Client Components - [x] Server Components - [ ] `async` components - [x] 'server-only' - [x] Update vitest example - [x] Handles CSS, and CSS modules imports - [x] Handles next/image ## Other - vercel#47448 - vercel#47299
Are there any updates to this? NextJS 14.1 is out and we hit this trying to upgrade. Happy to implement suggested workarounds (we are using Typescript) but its not clear what those are from reading this thread. |
|
Yup!
Both |
Great that you are on the latest Cypress version! Apart from the fact that Cypress says Next.js My experience was that you don't need any TypeScript workaround anymore with Cypress |
Yea, so this is the error were getting in CI. My understanding is that Cypress component testing has to reach into NextJS internals to make things work. This error suggests something around that changed Your configFile threw an error from: cypress.config.js
We stopped running your tests because your config file crashed.
Error: Failed to load "next/dist/build/webpack-config" with error: Headers is not defined
at getNextJsPackages (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/nextHandler.js:43:15)
at loadWebpackConfig (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/nextHandler.js:1[77](https://github.com/gamma-app/gamma/actions/runs/7577358478/job/20637999871#step:9:78):96)
at nextHandler (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/nextHandler.js:12:33)
at getPreset (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:92:56)
at Function.devServer.create (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:111:67)
at /home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:26:40
at new Promise (<anonymous>)
at devServer (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:24:12)
at Object.handler (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:166:24)
at invoke (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:1[85](https://github.com/gamma-app/gamma/actions/runs/7577358478/job/20637999871#step:9:86):18)
at /home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:59:14
at tryCatcher (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/bluebird/js/release/util.js:16:23)
at Function.Promise.attempt.Promise.try (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/bluebird/js/release/method.js:39:29)
at Object.wrapChildPromise (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:58:23)
at Object.wrap (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/dev-server.js:18:8)
at RunPlugins.execute (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:155:26)
at EventEmitter.<anonymous> (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:56:12)
at EventEmitter.emit (node:events:513:28)
at EventEmitter.emit (node:domain:4[89](https://github.com/gamma-app/gamma/actions/runs/7577358478/job/20637999871#step:9:90):12)
at process.<anonymous> (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:33:22)
at process.emit (node:events:513:28)
at process.emit (node:domain:489:12)
Test run failed, code 1
More information might be available above
Cypress module has returned the following error message:
Could not find Cypress test run results
Error: Could not find Cypress test run results |
Thanks for sharing your concrete error trace! The Cypress.io team would need to respond about their plans to support Next.js |
Yea looks like it was added and quickly removed :( |
The typescript PR we merged was to address the issue with Next.js 14 and E2E. We intend to support Next.js 14 for Component Testing and are open to PRs that get that closer. It is on our prioritized list of things to do, but no one is actively looking at it this sprint. |
I wanted to share my experience using Next 14 in case it helps anyone looking into this. We've got e2e and component tests, and when running them locally with Next.js 14.1.0 and Cypress 13.3.2 on Node 18.17.0, we have no issues at all with e2e or component tests (aside from the warning in the Cypress UI of course). My operating system is macOS Sonoma 14.1.1. The issue occurs for us when we try and run specifically component tests in CI on GitHub actions, which appears to be running Node 18.19.1, on Ubuntu 22.04.4. The following is a log of what Cypress gives us when trying to run the component tests, similar to the log James shared above.
Of course, it looks like some people are having issues running e2e tests with Next 14 as well, but this is just what we've experienced. |
@GRA0007 Thanks so much for this detail! We are indeed using a different/newer node version ( I'm going to try both |
Any updates? Is it safe to use cypress with next.js 14? It's been a couple months since the next.js 14 release... ): |
I'm getting warnings and errors so I'd wager it's probably not viable yet. I really do hope they will support it soon. It's been six months already. I've had to look into other solutions in the mean time. Ie. other test libraries, currently attempting with vitest but I'd much rather just stick with cypress. Btw my use case is for component testing with server components and server actions. |
This is also a blocker for me to introduce cypress into my org as we use the latest nextjs, and are getting the same error when trying component testing. |
Next.js specifies a minimum of Node.js The minimum Node.js version for Cypress is Node.js |
@MikeMcC399 true. A colleague whose pipeline still ran in node 16 had this problem, and we updated it to make it work. This thread tackles two different problems and it's not obvious at first. Which is the reason I posted it that way. |
works fine |
Async server components and server actions are not supported. I think both of these needs to be addressed before cypress can say they support next 14. |
Yes, Async server components are the problem. However, Async server components are not supported by any of the test frameworks suggested by NEXT in its documentation. It recommends using E2E tests for Async server components. |
Would it be possible to update the docs to make it clear what is and is not supported with NextJS 14 please? https://docs.cypress.io/guides/component-testing/react/overview#Nextjs-Caveats |
|
NextJS 14 was now released 6 months ago, and NextJS 14.2 was released yesterday. Is there any official update from the Cypress team on when v14 will be supported? It's interesting that this doesn't seem to be a higher priority given the popularity of Vercel & NextJS. |
I'm able to run e2e tests but still having issues with component tests with Next v14 and Cypress v13. I've tried using Node v18 and v20 and I still get the following errors consistently:
I'm using css modules, I have a very simple app with just 1 page and a simple form in it. I tried adding |
@jennifer-shehane Any updates here? It's quite frustrating to have no timetable of when developers can expect to be able to upgrade to NextJS 14 after 6 months now. |
What would you like?
Next.JS 14 was recently released: https://nextjs.org/blog/next-14
Currently cypress does not support that version, as you can see in the picture below
I request adding support of Next.JS 14
Why is this needed?
No response
Other
No response
The text was updated successfully, but these errors were encountered: