MSW not intercepting fetch requests

[Varkoff]

Hello everyone 👋,

I have been refactoring my Remix App to use this stack (mainly for Mocking with MSW & e2e playwright tests).

Unfortunately, mocking data created in MSW Handler does not seem to intercept request from playwright test despite MOCKS variable being set to true in start:mocks command.

Am I missing something ?

Check actions here : https://github.com/Varkoff/epic-stack-msw/actions/runs/4949407241

Code snippets :

/** getMockData.spec.ts **/
import { test, expect } from '@playwright/test'

test('Test that Mocks are running', async ({ page }) => {
	// Accessing our Remix resource route '/data', calling an external http://example.com/posts API
	const [data] = await Promise.all([
		page.waitForResponse(`/data`).then(res => res.json()),
		page.goto(`/data`),
	])

	// response should contain objects
	expect(data).toBeInstanceOf(Array)
	expect(data.length).toEqual(1)
	const [firstPost] = data
	expect(firstPost.id).toEqual(18)
	expect(firstPost.title).toEqual('Mocked post')
})

/** mocks/index.ts **/
import { rest } from 'msw'
import { setupServer } from 'msw/node'
import closeWithGrace from 'close-with-grace'
import { requiredHeader, writeEmail } from './utils'

const handlers = [
	rest.get('http://example.com/posts', (req, res, ctx) => {
		return res(
			ctx.json([
				{
					id: 18,
					title: 'Mocked post',
				},
			]),
			ctx.status(200),
		)
	}),
].filter(Boolean)

const server = setupServer(...handlers)

server.listen({ onUnhandledRequest: 'warn' })
console.info('🔶 Mock server installed')

closeWithGrace(() => {
	server.close()
})

[Varkoff]

There was error in produced code. The tests are passing. Closing this for now.