add client-side mocking with next

mswjs · Jan 22, 2024 · f45cce8 · f45cce8
1 parent 759bf1c
commit f45cce8
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 354 deletions.
diff --git a/examples/with-next/app/globals.css b/examples/with-next/app/globals.css
diff --git a/examples/with-next/app/layout.tsx b/examples/with-next/app/layout.tsx
@@ -1,22 +1,24 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import { MockProvider } from './mockProvider'
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <MockProvider>{children}</MockProvider>
+      </body>
     </html>
-  );
+  )
 }
diff --git a/examples/with-next/app/mockProvider.tsx b/examples/with-next/app/mockProvider.tsx
@@ -0,0 +1,35 @@
+'use client'
+import { useEffect, useState } from 'react'
+
+if (typeof window === 'undefined') {
+  throw new Error('Is not this a browser-only module?')
+}
+
+export async function MockProvider({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  const [mockingEnabled, enableMocking] = useState(false)
+
+  useEffect(() => {
+    async function enableApiMocking() {
+      /**
+       * @fixme Next puts this import to the top of
+       * this module and runs it during the build
+       * in Node.js. This makes "msw/browser" import to fail.
+       */
+      const { worker } = await import('../mocks/browser')
+      await worker.start()
+      enableMocking(true)
+    }
+
+    enableApiMocking()
+  }, [])
+
+  if (!mockingEnabled) {
+    return null
+  }
+
+  return <>{children}</>
+}
diff --git a/examples/with-next/app/movieList.tsx b/examples/with-next/app/movieList.tsx
@@ -0,0 +1,46 @@
+'use client'
+import { useState } from 'react'
+
+export type Movie = {
+  id: string
+  title: string
+}
+
+export function MovieList() {
+  const [movies, setMovies] = useState<Array<Movie>>([])
+
+  const fetchMovies = () => {
+    fetch('/graphql', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        query: `
+          query ListMovies {
+            movies {
+              id
+              title
+            }
+          }
+        `,
+      }),
+    })
+      .then((response) => response.json())
+      .then((movies) => setMovies(movies))
+      .catch(() => setMovies([]))
+  }
+
+  return (
+    <div>
+      <button onClick={fetchMovies}>Fetch movies</button>
+      {movies.length > 0 ? (
+        <ul>
+          {movies.map((movie) => (
+            <li id={movie.id}>{movie.title}</li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  )
+}