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

NEXT-889

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 16
  • Comments: 15 (8 by maintainers)

Commits related to this issue

Most upvoted comments

I am also experiencing the same issue as @defrex but instead of importing server-only I am importing next/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 profiles projects (I got the name wrong in my earlier comment) here: https://github.com/vercel/next.js/discussions/12411#discussioncomment-5472457

It’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 profiles projects, one for client-side code and one for server-side code. With two profiles projects you can have two different environments, jsdom for the client and then Node for the server.