How to write e2e test using playwright using mock data

[earnest hornet]

How to write e2e test using playwright using mock data when i am fetching the data server side

[leaden forge]

Hi @earnest hornet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To write an end-to-end (E2E) test using Playwright with mock data in a Next.js application, you can use the experimental test mode for Playwright. This allows you to intercept and mock API calls made during server-side data fetching. Here's a step-by-step guide based on the information from the knowledge sources:

1. Set Up Playwright: First, ensure that Playwright is set up in your Next.js project. You can follow the Next.js documentation for setting up Playwright.

2. Mock API Endpoints: You can use the next/experimental/testmode/playwright/msw to mock API endpoints. Here's an example of how you can define your mock handlers:

   import { test, expect } from 'next/experimental/testmode/playwright/msw';
   import { HttpResponse } from 'msw';
   
   test.use({
     mswHandlers: [
       // Mock specific API endpoints
       http.post(/courses\/\d+\/assignments\/\d+\/submissions\/\d+\/files/, () => {
         return HttpResponse.json({ ...mockedPreUploadData });
       }),
       http.post(mockedPreUploadData.upload_url, () => {
         return HttpResponse.json({ ...mockedCanvasFile });
       }),
       http.post(/courses\/\d+\/assignments\/\d+\/submissions/, () => {
         return HttpResponse.json({ ...mockedCanvasSubmission });
       }),
       // Allow all other requests to pass through
       http.all('*', () => {
         return passthrough();
       }),
     ],
     { scope: 'test' },
   });
   

3. Write the Test: Use the mocked API endpoints in your test. Here's an example test that uses the mocked endpoints:

   test('has file upload', async ({ page, next }) => {
     await mockAPIEndpoints(next);
     const fileChooserPromise = page.waitForEvent('filechooser');
     const fileUpload = await page.getByTestId(testIds.addSubmissionAttachment);
     await fileUpload.click();
     const fileChooser = await fileChooserPromise;

     const uploadFileName = 'README.md';
     await fileChooser.setFiles(path.join(__dirname, uploadFileName));

     const fileName = await page.getByTestId(testIds.selectedFileName);
     await expect(fileName).toHaveText(uploadFileName);

     const submitButton = await page.getByTestId(testIds.submitFile);
     await submitButton.click();

     await page.waitForSelector(`div[data-testid=${testIds.currentSubmission}]`);
     await expect(
       page.getByTestId(testIds.currentSubmission).getByText(uploadFileName)
     ).toBeVisible();
   });

4. Handle Passthroughs: If you encounter issues with passthrough not resolving requests properly, consider using bypass instead of passthrough for certain requests, as shown in the knowledge sources.

For more detailed information, you can refer to the GitHub issue that discusses mocking fetch requests without breaking other API calls.

By following these steps, you should be able to write E2E tests using Playwright with mock data for server-side data fetching in your Next.js application.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@earnest hornet Kapa.ai is still learning and improving, please let me know how I did by reacting below.