Could you explain mockServiceWorker.js more?

[nathanhannig]

It looks like there is a file that seems important, but I don't see any details in the README.

Could you explain mockServiceWorker.js more?

[iulspop]

I stumbled on this helpful explanation. playwright-msw integrates with Playwright by hooking into Playwright's page.route(). So createWorkerFixture doesn't create any service worker actually if the implementation as described in the comment is the same since then.

The alternative would be to load mock service worker in dev builds, then hook into the service worker using page.evaluate() to customize request handlers per test.

Personally, I find the playwright-msw implementation neat and handy. Don't have to change my dev build and I'm able to customize the request handlers per test easily without dealing with serialization issues. See await worker.use(getUser({ login })) below:

import { faker } from '@faker-js/faker'
import { getUser } from './handlers'
import { expect, test } from './test'

test.describe('developer dashboard page', () => {
  test('given user is not logged in', async ({ page, worker, loginPage, devDashboardPage }) => {
    await test.step('then navigate to dashboard', async () => {
      await devDashboardPage.goto()
      await expect(page, 'should redirect to /login').toHaveURL(/login/)
    })

    await test.step('then sign in', async () => {
      const login = faker.internet.userName()
      await worker.use(getUser({ login }))
      await loginPage.signInLink().click()
      await expect.soft(page, 'should redirect to /').toHaveURL(/\//)
      await expect(devDashboardPage.userProfileLogin(login), 'should load user info').toBeVisible()
    })

    await test.step('then sign out', async () => {
      await devDashboardPage.userProfileImage().click()
      await devDashboardPage.signOutButton().click()
      await expect(page, 'should redirect to /login').toHaveURL(/login/)
    })
  })
})