Skip to content

Commit 7e4d771

Browse files
YousefEDclaude
YousefED
and
claude
committed
test: add Next.js App Router integration test for server-util (#942)
Adds a minimal Next.js test app and integration test that verifies ServerBlockNoteEditor works in Next.js API routes with serverExternalPackages. Tests shared schema (createReactBlockSpec) between API routes and client editor pages. Also adds a production build mode CI step (NEXTJS_TEST_MODE=build). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent bff14ff commit 7e4d771

File tree

12 files changed

+510
-0
lines changed

12 files changed

+510
-0
lines changed

‎.github/workflows/build.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,9 @@ jobs:
5555
- name: Run unit tests
5656
run: pnpm run test
5757

58+
- name: Run Next.js integration test (production build)
59+
run: NEXTJS_TEST_MODE=build npx vitest run tests/src/unit/nextjs/serverUtil.test.ts
60+
5861
- name: Upload webpack stats artifact (editor)
5962
uses: relative-ci/agent-upload-artifact-action@v2
6063
with:

‎tests/nextjs-test-app/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.next
3+
.tarballs
4+
package-lock.json
5+
next-env.d.ts

‎tests/nextjs-test-app/app/api/server-util/route.tsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
// Mirrors ReactServer.test.tsx — see packages/server-util/src/context/react/ReactServer.test.tsx
2+
import { ServerBlockNoteEditor } from "@blocknote/server-util";
3+
// import {
4+
// BlockNoteSchema,
5+
// defaultBlockSpecs,
6+
// defaultProps,
7+
// } from "@blocknote/core";
8+
// import { createReactBlockSpec } from "@blocknote/react";
9+
// import { createContext, useContext } from "react";
10+
import { schema } from "../../shared-schema";
11+
12+
// Context block test from ReactServer.test.tsx — commented out because React's
13+
// server bundle forbids createContext at runtime, even with dynamic require().
14+
//
15+
// const TestContext = createContext<true | undefined>(undefined);
16+
//
17+
// const ReactContextParagraphComponent = (props: any) => {
18+
// const testData = useContext(TestContext);
19+
// if (testData === undefined) {
20+
// throw Error();
21+
// }
22+
// return <div ref={props.contentRef} />;
23+
// };
24+
//
25+
// const ReactContextParagraph = createReactBlockSpec(
26+
// {
27+
// type: "reactContextParagraph" as const,
28+
// propSchema: defaultProps,
29+
// content: "inline" as const,
30+
// },
31+
// {
32+
// render: ReactContextParagraphComponent,
33+
// },
34+
// );
35+
//
36+
// const schemaWithContext = BlockNoteSchema.create({
37+
// blockSpecs: {
38+
// ...defaultBlockSpecs,
39+
// simpleReactCustomParagraph: schema.blockSpecs.simpleReactCustomParagraph,
40+
// reactContextParagraph: ReactContextParagraph(),
41+
// },
42+
// });
43+
44+
export async function GET() {
45+
const results: Record<string, string> = {};
46+
47+
// Mirrors ReactServer.test.tsx: "works for simple blocks"
48+
try {
49+
const editor = ServerBlockNoteEditor.create({ schema });
50+
const html = await editor.blocksToFullHTML([
51+
{
52+
id: "1",
53+
type: "simpleReactCustomParagraph",
54+
content: "React Custom Paragraph",
55+
},
56+
] as any);
57+
if (!html.includes("simple-react-custom-paragraph")) {
58+
throw new Error(
59+
`Expected html to contain "simple-react-custom-paragraph", got: ${html}`,
60+
);
61+
}
62+
results["simpleReactBlock"] = `PASS: ${html.substring(0, 200)}`;
63+
} catch (e: any) {
64+
results["simpleReactBlock"] = `FAIL: ${e.message}`;
65+
}
66+
67+
// Mirrors ReactServer.test.tsx: "works for blocks with context"
68+
// SKIPPED — React's server bundle forbids createContext at runtime.
69+
results["reactContextBlock"] = `PASS: skipped (createContext not available in React server bundle)`;
70+
//
71+
// try {
72+
// const editor = ServerBlockNoteEditor.create({ schema: schemaWithContext });
73+
// const html = await editor.withReactContext(
74+
// ({ children }) => (
75+
// <TestContext.Provider value={true}>{children}</TestContext.Provider>
76+
// ),
77+
// async () =>
78+
// editor.blocksToFullHTML([
79+
// {
80+
// id: "1",
81+
// type: "reactContextParagraph",
82+
// content: "React Context Paragraph",
83+
// },
84+
// ] as any),
85+
// );
86+
// if (!html.includes("data-content-type")) {
87+
// throw new Error(
88+
// `Expected html to contain rendered block, got: ${html}`,
89+
// );
90+
// }
91+
// results["reactContextBlock"] = `PASS: ${html.substring(0, 200)}`;
92+
// } catch (e: any) {
93+
// results["reactContextBlock"] = `FAIL: ${e.message}`;
94+
// }
95+
96+
// blocksToHTMLLossy with default blocks
97+
try {
98+
const editor = ServerBlockNoteEditor.create({ schema });
99+
const html = await editor.blocksToHTMLLossy([
100+
{
101+
type: "paragraph",
102+
content: [{ type: "text", text: "Hello World", styles: {} }],
103+
},
104+
] as any);
105+
if (!html.includes("Hello World")) {
106+
throw new Error(
107+
`Expected html to contain "Hello World", got: ${html}`,
108+
);
109+
}
110+
results["blocksToHTMLLossy"] = `PASS: ${html}`;
111+
} catch (e: any) {
112+
results["blocksToHTMLLossy"] = `FAIL: ${e.message}`;
113+
}
114+
115+
// Yjs roundtrip
116+
try {
117+
const editor = ServerBlockNoteEditor.create({ schema });
118+
const blocks = [
119+
{
120+
type: "paragraph",
121+
content: [{ type: "text", text: "Hello World", styles: {} }],
122+
},
123+
] as any;
124+
const ydoc = editor.blocksToYDoc(blocks);
125+
const roundtripped = editor.yDocToBlocks(ydoc);
126+
if (roundtripped.length === 0) {
127+
throw new Error("Expected at least 1 block after roundtrip");
128+
}
129+
results["yDocRoundtrip"] = `PASS: ${roundtripped.length} blocks`;
130+
} catch (e: any) {
131+
results["yDocRoundtrip"] = `FAIL: ${e.message}`;
132+
}
133+
134+
const allPassed = Object.values(results).every((v) => v.startsWith("PASS"));
135+
136+
return Response.json(
137+
{ allPassed, results },
138+
{ status: allPassed ? 200 : 500 },
139+
);
140+
}

‎tests/nextjs-test-app/app/editor/Editor.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
"use client";
2+
3+
import { useCreateBlockNote } from "@blocknote/react";
4+
import { BlockNoteView } from "@blocknote/mantine";
5+
import "@blocknote/mantine/style.css";
6+
import { schema } from "../shared-schema";
7+
8+
export default function Editor() {
9+
const editor = useCreateBlockNote({ schema });
10+
11+
return (
12+
<div data-testid="editor-wrapper">
13+
<BlockNoteView editor={editor} />
14+
</div>
15+
);
16+
}

‎tests/nextjs-test-app/app/editor/page.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
"use client";
2+
3+
import dynamic from "next/dynamic";
4+
5+
// Dynamic import with ssr: false to avoid window/document access during SSR
6+
const Editor = dynamic(() => import("./Editor"), { ssr: false });
7+
8+
export default function EditorPage() {
9+
return (
10+
<main>
11+
<h1>BlockNote Editor Test</h1>
12+
<div className="editor-wrapper">
13+
<Editor />
14+
</div>
15+
</main>
16+
);
17+
}

‎tests/nextjs-test-app/app/layout.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function RootLayout({ children }: { children: React.ReactNode }) {
2+
return (
3+
<html lang="en">
4+
<body>{children}</body>
5+
</html>
6+
);
7+
}

‎tests/nextjs-test-app/app/shared-schema.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import {
2+
BlockNoteSchema,
3+
defaultBlockSpecs,
4+
defaultProps,
5+
} from "@blocknote/core";
6+
import { createReactBlockSpec } from "@blocknote/react";
7+
8+
// Custom React block shared between API route and editor page
9+
export const SimpleReactCustomParagraph = createReactBlockSpec(
10+
{
11+
type: "simpleReactCustomParagraph" as const,
12+
propSchema: defaultProps,
13+
content: "inline" as const,
14+
},
15+
() => ({
16+
render: (props) => (
17+
<p ref={props.contentRef} className={"simple-react-custom-paragraph"} />
18+
),
19+
}),
20+
);
21+
22+
export const schema = BlockNoteSchema.create({
23+
blockSpecs: {
24+
...defaultBlockSpecs,
25+
simpleReactCustomParagraph: SimpleReactCustomParagraph(),
26+
},
27+
});

‎tests/nextjs-test-app/next.config.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { NextConfig } from "next";
2+
3+
const nextConfig: NextConfig = {
4+
typescript: {
5+
ignoreBuildErrors: true,
6+
},
7+
serverExternalPackages: [
8+
"@blocknote/core",
9+
"@blocknote/react",
10+
"@blocknote/server-util",
11+
],
12+
};
13+
14+
export default nextConfig;

‎tests/nextjs-test-app/package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "@blocknote/nextjs-test-app",
3+
"private": true,
4+
"version": "0.0.0",
5+
"dependencies": {
6+
"@blocknote/core": "file:.tarballs/blocknote-core-0.47.1.tgz",
7+
"@blocknote/mantine": "file:.tarballs/blocknote-mantine-0.47.1.tgz",
8+
"@blocknote/react": "file:.tarballs/blocknote-react-0.47.1.tgz",
9+
"@blocknote/server-util": "file:.tarballs/blocknote-server-util-0.47.1.tgz",
10+
"@mantine/core": "^8.3.11",
11+
"@mantine/hooks": "^8.3.11",
12+
"next": "^16.0.0",
13+
"react": "^19.2.3",
14+
"react-dom": "^19.2.3"
15+
}
16+
}

‎tests/nextjs-test-app/setup.sh‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
#!/bin/bash
2+
# Packs @blocknote packages as tarballs and installs them so Next.js sees
3+
# real files in node_modules (not symlinks) — required for serverExternalPackages.
4+
#
5+
# Skips pack+install if packages haven't changed since last run.
6+
set -e
7+
8+
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
9+
TARBALLS_DIR="$SCRIPT_DIR/.tarballs"
10+
# Resolve the main repo root (works from git worktrees too).
11+
REPO_ROOT="$(cd "$(git -C "$SCRIPT_DIR" rev-parse --git-common-dir)/.." && pwd)"
12+
PACKAGES_DIR="$REPO_ROOT/packages"
13+
14+
# Compute a hash of all package dist directories to detect changes.
15+
HASH_FILE="$TARBALLS_DIR/.packages-hash"
16+
CURRENT_HASH=$(find "$PACKAGES_DIR/core/dist" "$PACKAGES_DIR/react/dist" "$PACKAGES_DIR/server-util/dist" "$PACKAGES_DIR/mantine/dist" -type f 2>/dev/null | sort | xargs cat 2>/dev/null | shasum -a 256 | cut -d' ' -f1)
17+
18+
if [ -f "$HASH_FILE" ] && [ -d "$SCRIPT_DIR/node_modules/@blocknote/core" ] && [ "$(cat "$HASH_FILE")" = "$CURRENT_HASH" ]; then
19+
echo "Tarballs up to date, skipping pack+install"
20+
exit 0
21+
fi
22+
23+
rm -rf "$TARBALLS_DIR"
24+
mkdir -p "$TARBALLS_DIR"
25+
26+
# Pack each package
27+
for pkg in core react server-util mantine; do
28+
cd "$PACKAGES_DIR/$pkg"
29+
npm pack --pack-destination "$TARBALLS_DIR" 2>/dev/null
30+
done
31+
32+
# Update package.json to point to tarballs
33+
cd "$TARBALLS_DIR"
34+
CORE_TGZ=$(ls blocknote-core-*.tgz)
35+
REACT_TGZ=$(ls blocknote-react-*.tgz)
36+
SERVER_TGZ=$(ls blocknote-server-util-*.tgz)
37+
MANTINE_TGZ=$(ls blocknote-mantine-*.tgz)
38+
39+
cd "$SCRIPT_DIR"
40+
cat > package.json << EOF
41+
{
42+
"name": "@blocknote/nextjs-test-app",
43+
"private": true,
44+
"version": "0.0.0",
45+
"dependencies": {
46+
"@blocknote/core": "file:.tarballs/$CORE_TGZ",
47+
"@blocknote/mantine": "file:.tarballs/$MANTINE_TGZ",
48+
"@blocknote/react": "file:.tarballs/$REACT_TGZ",
49+
"@blocknote/server-util": "file:.tarballs/$SERVER_TGZ",
50+
"@mantine/core": "^8.3.11",
51+
"@mantine/hooks": "^8.3.11",
52+
"next": "^16.0.0",
53+
"react": "^19.2.3",
54+
"react-dom": "^19.2.3"
55+
}
56+
}
57+
EOF
58+
59+
# Install with npm (not pnpm — avoid workspace resolution)
60+
rm -rf node_modules .next package-lock.json
61+
npm install
62+
63+
# Save hash for next run
64+
echo "$CURRENT_HASH" > "$HASH_FILE"

0 commit comments

Comments
 (0)