Use msw mocking in e2e test

package.json

@@ -45,6 +45,7 @@
     "eslint-plugin-react": "^7.33.2",
     "jsdom": "^22.1.0",
     "msw": "^1.2.1",
+    "playwright-msw": "^2.2.1",
     "prettier": "^3.0.3",
     "vite": "^4.4.11",
     "vitest": "^0.34.6"

src/mocks/index.ts

@@ -1,3 +1,3 @@
 export { server } from './server';
-export { url } from './handlers';
+export { url, handlers } from './handlers';
 export * from './data';

tests/home.spec.ts

@@ -1,4 +1,5 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from './msw-fixture';
+import { posts } from '@/mocks/data';
 
 test.describe('Home page', () => {
   test('has title', async ({ page }) => {
@@ -15,10 +16,8 @@ test.describe('Home page', () => {
   });
 
   test('has a link to a post', async ({ page }) => {
-    // TODO: use mocked data rather than external API
-    const name =
-      'sunt aut facere repellat provident occaecati excepturi optio reprehenderit';
-    const length = 100;
+    const postsData = posts();
+    const name = postsData[0].title;
 
     await page.goto('/');
 
@@ -27,7 +26,7 @@ test.describe('Home page', () => {
       name,
     });
 
-    await expect(list.getByRole('link')).toHaveCount(length);
+    await expect(list.getByRole('link')).toHaveCount(postsData.length);
     await expect(thePost).toBeInViewport();
 
     await thePost.click();

tests/msw-fixture.ts

@@ -0,0 +1,9 @@
+import { test as base } from '@playwright/test';
+import type { MockServiceWorker } from 'playwright-msw';
+import { createWorkerFixture } from 'playwright-msw';
+import { handlers } from '../src/mocks/handlers';
+export { expect } from '@playwright/test';
+
+export const test = base.extend<{
+  worker: MockServiceWorker;
+}>({ worker: createWorkerFixture(handlers) });