chore: try msw:ws-sync-handler

package.json

@@ -8,7 +8,7 @@
   "devDependencies": {
     "@playwright/test": "^1.45.3",
     "@types/node": "^20.14.12",
-    "msw": "./msw-2.2.1-rc.remote-server.tgz"
+    "msw": "./msw-2.4.2-rc.ws-sync-handlers.tgz"
   },
   "scripts": {
     "start": "node server-app/index.js",

tests/example.spec.ts

@@ -4,11 +4,11 @@ import { http, HttpResponse } from 'msw';
 import { RecipePage } from './pages/Recipe.page';
 
 test.describe('Recipes', () => {
-  const server = setupMockServer();
+  const remote = setupMockServer();
 
   test('List of recipes should be displayed', async ({ page }) => {
     // Given: RecipesApi API returns list of recipes
-    server.use(
+    remote.use(
       http.get('https://dummyjson.com/recipes', () => HttpResponse.json({
         recipes: [{
           name: 'Spaghetti Carbonara',
@@ -29,7 +29,7 @@ test.describe('Recipes', () => {
 
   test.skip('Error alert should be displayed when failed to load recipes', async ({ page }) => {
     // Given: RecipesApi returns an error
-    server.use(
+    remote.use(
       http.get('https://dummyjson.com/recipes', () => HttpResponse.error())
     );
 

tests/server-mocked.js

@@ -31,7 +31,7 @@ const server = setupServer(
 );
 
 server.listen({
-    remotePort: 3001
+    remote: true
 });
 
 /**

tests/setup.ts

@@ -1,20 +1,20 @@
 import { test } from '@playwright/test';
 import { setupRemoteServer, SetupRemoteServerApi } from 'msw/node';
 
-const server = setupRemoteServer();
+const remote = setupRemoteServer();
 
 export const setupMockServer = (): SetupRemoteServerApi => {
     test.beforeAll(async () => {
-        await server.listen({ port: 3001 });
+        await remote.listen();
     });
-
+    
     test.afterEach(async () => {
-        await server.resetHandlers();
+        await remote.resetHandlers();
     })
-
+    
     test.afterAll(async () => {
-        await server.close();
+        await remote.close();
     });
 
-    return server;
+    return remote;
 }