Skip to content
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

Open
wajdikhattel opened this issue Oct 31, 2023 · 39 comments
Open

Add support of Next.JS 14 #28185

wajdikhattel opened this issue Oct 31, 2023 · 39 comments
Labels
CT Issue related to component testing type: feature New feature that does not currently exist

Comments

@wajdikhattel
Copy link

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

image

I request adding support of Next.JS 14

Why is this needed?

No response

Other

No response

@MikeMcC399
Copy link
Contributor

MikeMcC399 commented Oct 31, 2023

Updating the Next.js 13 example in https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-next13-ts using

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

to Next.js 14 then running

npx cypress run --component

runs successfully and warns about compatibility (corresponding to the message in the original post above ^^).

typescript@4.9.5 is used.


A fresh installation of Next.js 14.0.1 taking defaults from

npx create-next-app

suffers from the unresolved issue which previously failed, is now working in Cypress 13.6.3 after the following issue was resolved:

> TSError: ⨯ Unable to compile TypeScript:
error TS5095: Option 'bundler' can only be used when 'module' is set to 'es2015' or later.

because typescript@5.2.2 is installed.

@jennifer-shehane jennifer-shehane added CT Issue related to component testing type: feature New feature that does not currently exist labels Oct 31, 2023
@MikeMcC399

This comment was marked as outdated.

@JackHowa
Copy link

JackHowa commented Nov 1, 2023

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

image

I request adding support of Next.JS 14

Why is this needed?

No response

Other

No response

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

@wajdikhattel

@MikeMcC399
Copy link
Contributor

MikeMcC399 commented Nov 1, 2023

@karlhorky
Copy link
Contributor

  • The compatibility between Cypress and Next.js 14 is only an issue for Component Testing.

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.

@MikeMcC399
Copy link
Contributor

@karlhorky

This is not true for our apps. End to end testing is also failing.

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?

@karlhorky
Copy link
Contributor

I couldn't see any reproductions from you in this thread

right, sorry, I meant the ones I added in #27731 (maybe more in #27448)

@MikeMcC399

This comment was marked as resolved.

@karlhorky
Copy link
Contributor

karlhorky commented Nov 2, 2023

Right yeah, to be clear, it's also a problem for any other TypeScript projects (non-Next.js projects) using "moduleResolution": "bundler" (maybe also other configurations like "Node16" and "NodeNext", I haven't checked).

@MikeMcC399
Copy link
Contributor

The demo E2E Next.js 14 project is now merged into
https://github.com/cypress-io/github-action/tree/master/examples/nextjs

This example does not cause a problem because it does not use TypeScript. It is based on following the instructions in

Create a Next.js App

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"

@karlhorky
Copy link
Contributor

karlhorky commented Nov 4, 2023

Yeah, the issues described above are about Next.js TypeScript projects.

leerob pushed a commit to vercel/next.js that referenced this issue Dec 13, 2023
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
@theonlydaleking
Copy link

FWIW when I updated to 14 I'm now faced with this when trying to set up component testing.

Screenshot 2023-12-19 at 6 38 11 am

@MikeMcC399
Copy link
Contributor

@theonlydaleking

You can click on Skip to ignore the check, however whether it will work or not depends on how Next.js has been installed. See other comments in this thread.

@nickmccurdy
Copy link

nickmccurdy commented Dec 21, 2023

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.

@MikeMcC399
Copy link
Contributor

@nickmccurdy

Alternatively, it could be marked as a duplicate of #27731 if the warning is fixed or considered complete.

export const WIZARD_DEPENDENCY_NEXT = {
type: 'next',
name: 'Next',
package: 'next',
installer: 'next',
description: 'The React Framework for Production',
minVersion: '^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0',
} as const

agustints pushed a commit to agustints/next.js that referenced this issue Jan 6, 2024
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
@jamesopti
Copy link

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.

@MikeMcC399
Copy link
Contributor

@jamesopti

@jamesopti
Copy link

  • Are you already using Cypress 13.6.3 for your upgrade?

Yup!

  • Are you running E2E or Component Testing (or both)?

Both

@MikeMcC399
Copy link
Contributor

@jamesopti

Great that you are on the latest Cypress version! Apart from the fact that Cypress says Next.js 14 is unsupported when you try to run Component Testing, did you hit any other issues?

My experience was that you don't need any TypeScript workaround anymore with Cypress 13.6.3.

@jamesopti
Copy link

Great that you are on the latest Cypress version! Apart from the fact that Cypress says Next.js 14 is unsupported when you try to run Component Testing, did you hit any other issues?

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

@MikeMcC399
Copy link
Contributor

@jamesopti

Thanks for sharing your concrete error trace!

The Cypress.io team would need to respond about their plans to support Next.js 14.
I can't see any mention of it on the Cypress App Priorities dashboard.

@jamesopti
Copy link

The Cypress.io team would need to respond about their plans to support Next.js 14. I can't see any mention of it on the Cypress App Priorities dashboard.

Yea looks like it was added and quickly removed :(

Screen Shot 2024-01-22 at 10 55 11 AM

@jennifer-shehane
Copy link
Member

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.

@GRA0007
Copy link

GRA0007 commented Feb 21, 2024

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.

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.3.2/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.3.2/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/nextHandler.js:177:96)
    at nextHandler (/home/runner/.cache/Cypress/13.3.2/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.3.2/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.3.2/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:111:67)
    at /home/runner/.cache/Cypress/13.3.2/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.3.2/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.3.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:166:24)
    at invoke (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:183:18)
    at /home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:59:14
    at tryCatcher (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/bluebird/js/release/util.js:16:23)
    at Function.Promise.attempt.Promise.try (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/bluebird/js/release/method.js:39:29)
    at Object.wrapChildPromise (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:58:23)
    at Object.wrap (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/dev-server.js:18:8)
    at RunPlugins.execute (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:155:26)
    at EventEmitter.<anonymous> (/home/runner/.cache/Cypress/13.3.2/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:489:12)
    at process.<anonymous> (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:33:[22](https://github.com/###/actions/runs/###/job/####step:8:23))
    at process.emit (node:events:513:[28](https://github.com/###/actions/runs/###/job/####step:8:29))
    at process.emit (node:domain:489:12)

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.

@jamesopti
Copy link

jamesopti commented Feb 22, 2024

@GRA0007 Thanks so much for this detail! We are indeed using a different/newer node version (v18.18.2)

I'm going to try both 18.17.0 as well as moving up to 20.9.0

@randreu28
Copy link

Any updates? Is it safe to use cypress with next.js 14? It's been a couple months since the next.js 14 release... ):

@JuicyBenjamin
Copy link

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.

@anuraags
Copy link

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.

@adrianstanek
Copy link

adrianstanek commented Mar 30, 2024

I have the same issue when starting in the default environment with node 16. All tests work when I switch to node 18 (nvm use 18) in "open" and "run" ✅

Note: I still get the warning that the next 14 isn't on the compatibility list.

Starting in a terminal with node 16:
image

Starting in a terminal with node 18:
image

@MikeMcC399
Copy link
Contributor

@adrianstanek

Next.js specifies a minimum of Node.js 18.17. See also Next.js 14 blog > Other Changes.

The minimum Node.js version for Cypress is 18.x - see Cypress > System Requirements.

Node.js 16 reached end-of-life on Sep 11, 2023 so it should normally not be the "default" anywhere anymore.

@adrianstanek
Copy link

@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.

@sirTangale
Copy link

works fine
both component and e2e test with versions nextjs 14 + , node 18 + cypress 13.6 +

@JuicyBenjamin
Copy link

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.

@sirTangale
Copy link

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.
My best bet would be to use E2E and component tests using Cypress, and for unit tests, I would consider either Vitest or Jtest.

@petewarman
Copy link

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

@MikeMcC399
Copy link
Contributor

@petewarman

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

@jamesopti
Copy link

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.

@Luke-Gurgel
Copy link

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:

CypressError: `cy.mount()` must be implemented by the user. There are
full instructions for doing so at the following location.
 1) An uncaught error was detected outside of a test:
     TypeError: The following error originated from your test code, not from Cypress.

  > Cannot read properties of null (reading 'parentNode')

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

I'm using css modules, I have a very simple app with just 1 page and a simple form in it. I tried adding <div data-cy-root id="__next_css__DO_NOT_USE__"></div> to the cypress/support/component-index.html file and that made the 2nd error disappear.

@jamesopti
Copy link

jamesopti commented May 4, 2024

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.

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CT Issue related to component testing type: feature New feature that does not currently exist
Projects
Status: Understanding
Development

No branches or pull requests