Skip to content

[NEXT-889] Unable to Test Server Components in Next.js 13 App Dir #47448

@defrex

Description

@defrex

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    TestingRelated to testing with Next.js.bugIssue was opened via the bug report template.locked

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions