Issues with Cypress Component Testing in Next.js v13

[muratkeremozcan]

Current behavior

Overview

As we transition some of our applications to Next.js v13, we are keen to leverage Cypress component testing. However, given the novelty of Next.js v13, we're facing challenges due to the scarcity of resources detailing best practices and the core mechanics of integrating Cypress component tests with this new version.

We've identified two primary issues which may resonate with other users:

---

Issue 1: CSS Importing in Component Tests

Description:
When attempting to include styles in our Cypress component tests by directly importing the CSS file (e.g., import '../app/globals.css'), we encountered the following error:

The following error originated from your test code, not from Cypress.
> Cannot read properties of null (reading 'parentNode')

This error appears to emanate from Next.js's internal handling of CSS and may be conflicting with how Cypress sets up its testing environment.

Reproduction Steps:

git clone [email protected]:muratkeremozcan/next-13-todo-list.git
cd next-13-todo-list
npm i
npm run cy:open-ct
# Execute the test todo-item.cy.tsx
# Enable 2 and execute again
# https://github.com/muratkeremozcan/next-13-todo-list/blob/main/src/components/todo-item.cy.tsx#L2

---

Issue 2: Integration of Server Components in Cypress Tests

Description:
When attempting to test a component that makes use of Next.js's new "use server" directive, we encountered an error related to the module react-server-dom-webpack/client. This issue arises even when stubbing out the server component functions, indicating a deeper integration challenge.

Reproduction Steps:

# same repo as above
git clone [email protected]:muratkeremozcan/next-13-todo-list.git
cd next-13-todo-list
npm i
npm run cy:open-ct
# Execute the test pageNew.cy.tsx (it is skipped)
# uncomment the lines importing and mounting the component, and re-execute
# https://github.com/muratkeremozcan/next-13-todo-list/blob/main/src/app/new/pageNew.cy.tsx

We are eager to find solutions or workarounds for these issues. Guidance or insights from the Cypress community and maintainers would be greatly appreciated.
/

Desired behavior

We can incorporate styles into component tests with NextJs 13.

We can test components involving 'use server' whether it is a server component or using server code in a client component.

Test code to reproduce

https://github.com/muratkeremozcan/next-13-todo-list

git clone [email protected]:muratkeremozcan/next-13-todo-list.git
cd next-13-todo-list
npm i
npm run cy:open-ct

Search for the string "TODO: "

Cypress Version

13.2.0

Node version

18

Operating System

mac, ubuntu (CI), probably Windows as well

Debug Logs

No response

Other

No response

[eamondunne]

I am also seeing the same issue related to react-server-dom-webpack/client.

From debugging, I've noticed the errors stop when I comment out any of my NextJS Server Actions used for form submission.

[muratkeremozcan]

For server components, we can just skip using the use server directive, since everything under the app folder is a server component unless specified.

I still don't have a solution for styles. Tried using a custom mount with the RootLayout component, and it fails the same way.

On the bright side, finally locked down a good method to test server componets with CyCT.
Check out the video and the PR
There is also a short demo of the the issue with styles and use server in the final third of the video.

[raphaelbadia]

I've been trying to make it work with server actions but without success.

I've tried to

• mock the server action module as described by @bahmutov in https://glebbahmutov.com/blog/stub-react-import/
• add react-server-dom-webpack to the webpack config

but no success in doing so

[muratkeremozcan]

Found a solution to Issue1 (styles) thanks to a YouTube comment.

We need to add a line <div id="__next_css__DO_NOT_USE__"></div> to componet-index.html file's body.

Here's the PR that fixes it.

[redbmk]

@raphaelbadia did you ever find a solution to this? I'm thinking it's probably easiest to pass actions down from the server component rather than importing them directly, but it would be nice if we could just stub out the import instead. That article has enough differences (js instead of ts, CRA instead of next, etc) that I'm having a hard time getting it to work.

[raphaelbadia]

@redbmk unfortunately no, we're passing actions as props like you said. :/