fix(next-swc): skips client/server only checks when running with Jest…

… to unblock testing (#54891)

Co-authored-by: Jiachi Liu <inbox@huozhi.im>

.eslintrc.json

@@ -6,7 +6,8 @@
     "browser": true,
     "commonjs": true,
     "es6": true,
-    "node": true
+    "node": true,
+    "jest": true
   },
   "parserOptions": {
     "requireConfigFile": false,

jest.config.js

@@ -5,7 +5,13 @@ const createJestConfig = nextJest()
 // Any custom config you want to pass to Jest
 /** @type {import('jest').Config} */
 const customJestConfig = {
-  testMatch: ['**/*.test.js', '**/*.test.ts', '**/*.test.tsx'],
+  testMatch: [
+    '**/*.test.js',
+    '**/*.test.ts',
+    '**/*.test.tsx',
+    '**/jest/**/*.test.jsx',
+    '**/jest/**/*.test.tsx',
+  ],
   setupFilesAfterEnv: ['<rootDir>/jest-setup-after-env.ts'],
   verbose: true,
   rootDir: 'test',

package.json

@@ -87,6 +87,7 @@
     "@swc/cli": "0.1.55",
     "@swc/core": "1.3.55",
     "@swc/helpers": "0.5.1",
+    "@testing-library/jest-dom": "6.1.2",
     "@testing-library/react": "13.0.0",
     "@types/cheerio": "0.22.16",
     "@types/cookie": "0.3.3",

packages/next-swc/crates/core/src/lib.rs

@@ -95,6 +95,9 @@ pub struct TransformOptions {
     #[serde(default)]
     pub is_server: bool,
 
+    #[serde(default)]
+    pub disable_checks: bool,
+
     #[serde(default)]
     pub server_components: Option<react_server_components::Config>,
 
@@ -190,7 +193,8 @@ where
                     file.name.clone(),
                     config.clone(),
                     comments.clone(),
-                    opts.app_dir.clone()
+                    opts.app_dir.clone(),
+                    opts.disable_checks
                 )),
             _ => Either::Right(noop()),
         },

packages/next-swc/crates/core/src/react_server_components.rs

@@ -50,6 +50,7 @@ struct ReactServerComponents<C: Comments> {
     invalid_client_imports: Vec<JsWord>,
     invalid_server_react_apis: Vec<JsWord>,
     invalid_server_react_dom_apis: Vec<JsWord>,
+    disable_checks: bool,
 }
 
 struct ModuleImports {
@@ -128,7 +129,7 @@ impl<C: Comments> ReactServerComponents<C> {
                                             if is_action_file {
                                                 panic_both_directives(expr_stmt.span)
                                             }
-                                        } else {
+                                        } else if !self.disable_checks {
                                             HANDLER.with(|handler| {
                                                 handler
                                                     .struct_span_err(
@@ -333,6 +334,9 @@ impl<C: Comments> ReactServerComponents<C> {
     }
 
     fn assert_server_graph(&self, imports: &[ModuleImports], module: &Module) {
+        if self.disable_checks {
+            return;
+        }
         for import in imports {
             let source = import.source.0.clone();
             if self.invalid_server_imports.contains(&source) {
@@ -405,6 +409,9 @@ impl<C: Comments> ReactServerComponents<C> {
     }
 
     fn assert_client_graph(&self, imports: &[ModuleImports], module: &Module) {
+        if self.disable_checks {
+            return;
+        }
         for import in imports {
             let source = import.source.0.clone();
             if self.invalid_client_imports.contains(&source) {
@@ -560,12 +567,14 @@ pub fn server_components<C: Comments>(
     config: Config,
     comments: C,
     app_dir: Option<PathBuf>,
+    disable_checks: bool,
 ) -> impl Fold + VisitMut {
-    let is_server: bool = match config {
+    let is_server: bool = match &config {
         Config::WithOptions(x) => x.is_server,
         _ => true,
     };
     as_folder(ReactServerComponents {
+        disable_checks,
         is_server,
         comments,
         filepath: filename.to_string(),

packages/next-swc/crates/core/tests/errors.rs

@@ -97,6 +97,7 @@ fn react_server_components_server_graph_errors(input: PathBuf) {
                 ),
                 tr.comments.as_ref().clone(),
                 None,
+                false,
             )
         },
         &input,
@@ -121,6 +122,7 @@ fn react_server_components_client_graph_errors(input: PathBuf) {
                 ),
                 tr.comments.as_ref().clone(),
                 None,
+                false,
             )
         },
         &input,
@@ -167,6 +169,7 @@ fn react_server_actions_server_errors(input: PathBuf) {
                     ),
                     tr.comments.as_ref().clone(),
                     None,
+                    false
                 ),
                 server_actions(
                     &FileName::Real("/app/item.js".into()),
@@ -202,6 +205,7 @@ fn react_server_actions_client_errors(input: PathBuf) {
                     ),
                     tr.comments.as_ref().clone(),
                     None,
+                    false
                 ),
                 server_actions(
                     &FileName::Real("/app/item.js".into()),

packages/next-swc/crates/core/tests/fixture.rs

@@ -325,6 +325,29 @@ fn react_server_components_server_graph_fixture(input: PathBuf) {
                 ),
                 tr.comments.as_ref().clone(),
                 None,
+                false,
+            )
+        },
+        &input,
+        &output,
+        Default::default(),
+    );
+}
+
+#[fixture("tests/fixture/react-server-components/server-graph-no-checks/**/input.js")]
+fn react_server_components_no_checks_server_graph_fixture(input: PathBuf) {
+    let output = input.parent().unwrap().join("output.js");
+    test_fixture(
+        syntax(),
+        &|tr| {
+            server_components(
+                FileName::Real(PathBuf::from("/some-project/src/some-file.js")),
+                next_swc::react_server_components::Config::WithOptions(
+                    next_swc::react_server_components::Options { is_server: true },
+                ),
+                tr.comments.as_ref().clone(),
+                None,
+                true,
             )
         },
         &input,
@@ -346,6 +369,29 @@ fn react_server_components_client_graph_fixture(input: PathBuf) {
                 ),
                 tr.comments.as_ref().clone(),
                 None,
+                false,
+            )
+        },
+        &input,
+        &output,
+        Default::default(),
+    );
+}
+
+#[fixture("tests/fixture/react-server-components/client-graph-no-checks/**/input.js")]
+fn react_server_components_no_checks_client_graph_fixture(input: PathBuf) {
+    let output = input.parent().unwrap().join("output.js");
+    test_fixture(
+        syntax(),
+        &|tr| {
+            server_components(
+                FileName::Real(PathBuf::from("/some-project/src/some-file.js")),
+                next_swc::react_server_components::Config::WithOptions(
+                    next_swc::react_server_components::Options { is_server: false },
+                ),
+                tr.comments.as_ref().clone(),
+                None,
+                true,
             )
         },
         &input,

packages/next-swc/crates/core/tests/fixture/react-server-components/client-graph-no-checks/client-only/input.js

@@ -0,0 +1,13 @@
+// This is a comment.
+
+'use strict'
+
+/**
+ * This is a comment.
+ */
+
+import 'client-only'
+
+export default function () {
+  return null
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/client-graph-no-checks/client-only/output.js

@@ -0,0 +1,8 @@
+// This is a comment.
+'use strict';
+/**
+ * This is a comment.
+ */ import 'client-only';
+export default function() {
+    return null;
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/client-graph-no-checks/get-server-side-props/input.js

@@ -0,0 +1,5 @@
+export function getServerSideProps() {}
+
+export default function () {
+  return null
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/client-graph-no-checks/get-server-side-props/output.js

@@ -0,0 +1,4 @@
+export function getServerSideProps() {}
+export default function() {
+    return null;
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/client-graph-no-checks/get-static-props/input.js

@@ -0,0 +1,5 @@
+export function getStaticProps() {}
+
+export default function () {
+  return null
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/client-graph-no-checks/get-static-props/output.js

@@ -0,0 +1,4 @@
+export function getStaticProps() {}
+export default function() {
+    return null;
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/client-graph-no-checks/server-only/input.js

@@ -0,0 +1,13 @@
+// This is a comment.
+
+'use strict'
+
+/**
+ * This is a comment.
+ */
+
+import 'server-only'
+
+export default function () {
+  return null
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/client-graph-no-checks/server-only/output.js

@@ -0,0 +1,8 @@
+// This is a comment.
+'use strict';
+/**
+ * This is a comment.
+ */ import 'server-only';
+export default function() {
+    return null;
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/client-graph-no-checks/use-client/input.js

@@ -0,0 +1,8 @@
+import 'react'
+
+// prettier-ignore
+'use client'
+
+export default function () {
+  return null
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/client-graph-no-checks/use-client/output.js

@@ -0,0 +1,4 @@
+import 'react';
+export default function() {
+    return null;
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/client-only/input.js

@@ -0,0 +1,13 @@
+// This is a comment.
+
+'use strict'
+
+/**
+ * This is a comment.
+ */
+
+import 'client-only'
+
+export default function () {
+  return null
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/client-only/output.js

@@ -0,0 +1,8 @@
+// This is a comment.
+'use strict';
+/**
+ * This is a comment.
+ */ import 'client-only';
+export default function() {
+    return null;
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/fake-client-entry/input.js

@@ -0,0 +1,6 @@
+export default function () {
+  return null
+}
+
+// prettier-ignore
+'use client'

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/fake-client-entry/output.js

@@ -0,0 +1,3 @@
+export default function() {
+    return null;
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/get-server-side-props/input.js

@@ -0,0 +1,5 @@
+export function getServerSideProps() {}
+
+export default function () {
+  return null
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/get-server-side-props/output.js

@@ -0,0 +1,4 @@
+export function getServerSideProps() {}
+export default function() {
+    return null;
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/get-static-props/input.js

@@ -0,0 +1,5 @@
+export function getStaticProps() {}
+
+export default function () {
+  return null
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/get-static-props/output.js

@@ -0,0 +1,4 @@
+export function getStaticProps() {}
+export default function() {
+    return null;
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/react-api/input.js

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+
+import { createContext } from 'react'
+
+import { useEffect, useImperativeHandle } from 'react'
+
+import {
+  Component,
+  createFactory,
+  PureComponent,
+  useDeferredValue,
+  useInsertionEffect,
+  useLayoutEffect,
+  useReducer,
+  useRef,
+  useSyncExternalStore,
+} from 'react'
+
+export default function () {
+  return null
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/react-api/output.js

@@ -0,0 +1,7 @@
+import { useState } from 'react';
+import { createContext } from 'react';
+import { useEffect, useImperativeHandle } from 'react';
+import { Component, createFactory, PureComponent, useDeferredValue, useInsertionEffect, useLayoutEffect, useReducer, useRef, useSyncExternalStore } from 'react';
+export default function() {
+    return null;
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/react-dom-api/input.js

@@ -0,0 +1,10 @@
+import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom'
+
+import {
+  experimental_useOptimistic as useOptimistic,
+  experimental_useFormStatus,
+} from 'react-dom'
+
+export default function () {
+  return null
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/react-dom-api/output.js

@@ -0,0 +1,5 @@
+import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom';
+import { experimental_useOptimistic as useOptimistic, experimental_useFormStatus } from 'react-dom';
+export default function() {
+    return null;
+}

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/react-dom-server-client/input.js

@@ -0,0 +1,15 @@
+// This is a comment.
+
+'use strict'
+
+/**
+ * This is a comment.
+ */
+
+import 'react-dom/server'
+
+import 'react-dom/client'
+
+export default function () {
+  return null
+}