next.js: [NEXT-889] Unable to Test Server Components in Next.js 13 App Dir
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:39:46 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6020
Binaries:
Node: 19.7.0
npm: 9.5.0
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.2.5-canary.14
eslint-config-next: 13.2.4
react: 18.2.0
react-dom: 18.2.0
Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true), Jest (next/jest)
Link to the code that reproduces this issue
https://github.com/defrex/next13-jest-server-bug
To Reproduce
In the linked repo, npm i && npx jest
The repo is just a very basic create-next-app
project with Jest installed, using the next/jest
config.
Describe the Bug
Any test of a server-only component (or anything with a server-only component in it’s import path) fails to load.
Like so,
FAIL src/app/layout.test.ts
● Test suite failed to run
× NEXT_RSC_ERR_CLIENT_IMPORT: server-only
╭─[/Users/defrex/code/broken-jest-example/src/app/layout.tsx:1:1]
1 │ import "./globals.css";
2 │ import "server-only";
· ─────────────────────
3 │
4 │ export async function getLayoutData() {
5 │ return {
╰────
3 | describe("Layout getData", () => {
4 | it("should return data", async () => {
> 5 | const data = await getLayoutData();
| ^
6 | expect(data.isData).toBeTruthy();
7 | });
8 | });
at Object.transformSync (node_modules/next/src/build/swc/index.ts:376:25)
at Object.<anonymous> (src/app/layout.test.ts:5:17)
Expected Behavior
I would expect these files/components to be testable. Or at very least, to be able to import non-component code from related files for the sake of testing.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 16
- Comments: 15 (8 by maintainers)
I am also experiencing the same issue as @defrex but instead of importing
server-only
I am importingnext/headers
in a page.tsx file that is in the app dir.Testing is raising the same
NEXT_RSC_ERR_CLIENT_IMPORT
error as above.Any guidance on how to fix would be much appreciated!!
@feugy This problem still seems to be occurring when using vitest–what is the vitest equivalent of configuring server-only code for testing using
/** @jest-environment node */
?That should also work with Vitest (along with
@vitest-environment
).Same issue. Would love to start testing 😃 Or would I…
Ah, I was wrong, it was Blitz, not ‘Next Right Now’: https://github.com/blitz-js/blitz/blob/canary/packages/blitz/jest-preset.js#L50-L82
Someone has also shared an example of using
profilesprojects (I got the name wrong in my earlier comment) here: https://github.com/vercel/next.js/discussions/12411#discussioncomment-5472457It’s more that
jsdom
simulates a browser (a client), I think. That must trigger some Next.js or React code that checks to see if a React Sever Component is being used outside of a Server context.The NEXT-889 issue tag in the issue title means that the Next team are tracking this internally, so that’s a good sign.
I think one solution will be to have two Jest
profilesprojects, one for client-side code and one for server-side code. With twoprofilesprojects you can have two different environments,jsdom
for the client and then Node for the server.