How to apply MSW mocking in Next.js server component?

[chbaefront]

// src/components/ExampleServer.tsx

export default async function ExampleServer() {
    const res = await fetch('/api/example');
    const {message} = await res.json();

    return (
        <div>
            <h1>Server Side API Call</h1>
            <p>{message}</p>
        </div>
    );
}

// src/mocks/browser.ts
import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)

// src/mocks/node.ts
import { setupServer } from 'msw/node'
import { handlers } from './handlers'

export const server = setupServer(...handlers)

// src/mocks/handlers.ts
import {http, HttpResponse, passthrough} from 'msw'

interface User {
    id: number
    name: string
}

export const handlers = [
    http.get('/api/example', () => {
        return HttpResponse.json({message: 'Hello, MSW!'});
    }),

    http.get('/api/users', () => {
        const users: User[] = [
            {id: 1, name: 'John'},
            {id: 2, name: 'Jane'},
        ]
        return HttpResponse.json(users)
    }),

    http.post('/api/users', async ({request}) => {
        const newUser = await request.json() as Omit<User, 'id'>
        return HttpResponse.json({id: 3, ...newUser} as User, {status: 201})
    }),

    http.get('*', ({request}) => {
        console.log('url', request.url);

        if (/\.(png|jpg|jpeg|gif|svg)$/.test(request.url)) {
            return passthrough();
        }

        return passthrough();
    }),
]

// src/mocks/index.ts
async function initMocks() {
    if (typeof window === 'undefined') {
        console.log("Initializing msw by server");
        const {server} = await import('./node')
        server.listen({
            onUnhandledRequest: 'bypass',
        })
    } else {
        console.log("Initializing msw by browser");
        const {worker} = await import('./browser')
        await worker.start({
            onUnhandledRequest: 'bypass',
        })
    }
}

export default initMocks

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental:{
        instrumentationHook: true,
    }
};

export default nextConfig;

// src/instrumentation.ts
// import {server} from './mocks/node'; // module not found

export async function register() {
    if(process.env.NEXT_RUNTIME === 'nodejs' && process.env.NODE_ENV === 'development') {
        const { server } = await import('./mocks/node')
        server.listen({
            onUnhandledRequest: 'bypass',
        });
    }
}

How do I apply MSW mocking in Next.js server components?

I set it up like above. The client side is mocked normally, but the server component is not. And I get an error like [MSW] Failed to apply interceptor: the global WebSocket property is non-configurable. This is likely an issue with your environment. If you are using a framework, please open an issue about this in their repository.

Is there a solution or workaround?

I followed this link: mswjs/examples#101 but I still failed. Please help!

git url: https://github.com/katanazero86/nextjs-msw

[kettanaito]

Hi.

[MSW] Failed to apply interceptor: the global WebSocket property is non-configurable.

This error means you are running an older version of MSW. I believe we've fixed this issue. Please update and see.

Overall, here are some resources that can help you:

• Next.js (App router) + MSW usage example
• Next.js RSC testing example with MSW (experimental)

[chbaefront]

@kettanaito thanks