How to use the experimental testmode?

[lucgagan]

Summary

This is my test:

import { test, expect, rest } from 'next/experimental/testmode/playwright/msw';

test('prints name retrieved from the API', async ({ page, msw }) => {
  msw.use(
    rest.get('http://localhost:3000/api/hello', (req, res, ctx) => {
      return res.once(
        ctx.status(200),
        ctx.json({
          name: 'Bar',
        })
      )
    })
  );

  await page.goto('/');

  await expect(page.getByTestId('message')).toHaveText('Hello Bar');
});

This is my app:

import { GetServerSideProps } from 'next'

export default function Home({ name }) {
  return <div data-testid="message">Hello {name}</div>
}

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetch('http://localhost:3000/api/hello')
  const data = await res.json();

  return {
    props: {
      name: data.name,
    },
  }
}

import type { NextApiRequest, NextApiResponse } from 'next'
 
type ResponseData = {
  name: string
}
 
export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  res.status(200).json({ name: 'Foo' });
}

Additional information

I would expect message to be "Hello Bar", but I am only seeing "Hello Foo".

It appears the msw is never triggered.

Tagging people who worked on this @dvoytenko @anjalbinayak

Example

No response

[lucgagan]

Tagging people who worked on this @dvoytenko @anjalbinayak

[dvoytenko]

@lucgagan how are starting your app? I haven't tested this with the page router, since we've been only experimenting with the app router for this. But I'll try and ping back what I see.

[dvoytenko]

@lucgagan Just tried some version of your example and it worked for me. I ran the app using npm dev -- --experimental-test-proxy

[lucgagan]

Thanks for the help. I wrote a little tutorial on the subject https://ray.run/blog/testing-nextjs-apps-using-playwright

[jsindos]

Hey guys, I'm not sure if this is the right place to ask this but I haven't been able to find much information online.

I'm wondering if it possible to enable this feature with onUnhandledRequest: 'bypass' set to true for setupServer from msw? I want to mock a single endpoint, but let all other api calls proceed as normal.

[Develliot]

next/experimental/testmode/playwright.js is awesome, what are the chances of this becoming a stable feature?