fix(deps): upgrade Remix and resolve npm audit vulnerabilities (#213) (#240)

zainfathoni · wheeljackz · ampcode-com · web-flow · commit 83cc673aebc8 · 2026-03-28T09:33:53.000+07:00
* fix(deps): upgrade Remix and resolve npm audit vulnerabilities (#213) - Upgrade @remix-run/* from 2.17.2 to 2.17.4 - Upgrade MSW from 0.36 to 2.x (update handler syntax to http/HttpResponse) - Upgrade validator from 13.7.0 to 13.15.26 - Replace Faker.js email generation with nanoid-based mock data - Use relative import for nanoid in mock-data (esbuild-register compat) - Use non-burner email domain (@rumahberbagi.test) in mock data - Write magic link fixture directly in RUNNING_E2E mode (bypass MSW bundling issues with Remix/esbuild) - Resolve npm audit vulnerabilities * docs: add testing gotchas to CLAUDE.md Document burner email domain pitfall and MSW/Remix bundling issue to prevent future debugging time. * fix: remove stale MSW preload comment and unused setup.cjs The --require preload approach was reverted in favor of writing the magic link fixture directly in email.server.tsx. Remove the stale comment and the unused mocks/setup.cjs file. * chore: remove unused MSW dependency and update docs MSW is no longer used — e2e API mocking is handled at the app level (email.server.tsx writes the magic link fixture directly when RUNNING_E2E=true). Remove mocks/server.ts, mocks/handlers.ts, msw from package.json, and update docs/testing-principles.md. * fix(deps): update brace-expansion in package-lock to fix GHSA-f886-m6hf-6m8v Amp-Thread-ID: https://ampcode.com/threads/T-019d3009-c7d5-7282-987d-1ba12b07b0db Co-authored-by: Amp <amp@ampcode.com> --------- Co-authored-by: Wheeljack <wheeljack@zavi.family> Co-authored-by: Amp <amp@ampcode.com>
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -55,6 +55,21 @@ Transaction, Content, Consumption, AuditLog.
 - `/login` → `/magic` - Email magic link auth
 - `/dashboard/*` - Protected course management
 
+## Testing Gotchas
+
+### Mock emails must not use burner domains
+
+The `burner-email-providers` package blocks domains like `@example.com` during
+login. Mock/seed data must use a non-burner domain (e.g. `@rumahberbagi.test`).
+If e2e login tests fail silently (no magic link sent, no error logged), check
+the email domain first.
+
+### MSW and Remix bundling
+
+MSW v2 interceptors break when bundled by Remix's esbuild. Instead of relying on
+MSW to intercept API calls in e2e mode, the app writes the magic link fixture
+directly when `RUNNING_E2E=true` (see `email.server.tsx`).
+
 ## Commit Convention
 
 Conventional Commits: `<type>[scope]: <description>`
diff --git a/app/components/__tests__/footer.test.tsx b/app/components/__tests__/footer.test.tsx
@@ -1,11 +1,14 @@
 import { render, screen } from '@testing-library/react'
-import { build, fake } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import type { FooterProps } from '~/components/footer'
 import { Footer } from '~/components/footer'
+import { mockSlug } from '~/models/__mocks__/mock-data'
 
 const footerBuilder = build<FooterProps>('Footer', {
   fields: {
-    instagramUrl: fake((f) => f.internet.url()),
+    instagramUrl: perBuild(
+      () => `https://instagram.com/${mockSlug('rumah-berbagi')}`
+    ),
   },
 })
 
diff --git a/app/components/__tests__/transaction-item.test.tsx b/app/components/__tests__/transaction-item.test.tsx
@@ -1,25 +1,36 @@
-import { build, fake, oneOf, perBuild } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { screen } from '@testing-library/react'
 import { TransactionItem, TransactionItemProps } from '../transaction-item'
 import { render } from '#test/test-utils'
 import { printLocaleDateTimeString } from '~/utils/format'
 import { TRANSACTION_STATUS } from '~/models/enum'
 import { generateId } from '~/utils/nanoid'
+import {
+  mockBankAccountNumber,
+  mockName,
+  mockPastDate,
+  mockSentence,
+  pick,
+  randomInt,
+} from '~/models/__mocks__/mock-data'
+
+const transactionStatuses = Object.values(TRANSACTION_STATUS)
 
 const transactionItemBuilder = build<TransactionItemProps>('TransactionItem', {
   fields: {
     to: perBuild(
       () =>
-        `${generateId()}?status=${oneOf(TRANSACTION_STATUS)}&page=${Math.floor(
-          Math.random() * 100
+        `${generateId()}?status=${pick(transactionStatuses)}&page=${randomInt(
+          1,
+          100
         )}`
     ),
-    bankAccountName: fake((f) => f.finance.accountName()),
-    bankAccountNumber: fake((f) => f.finance.account()),
-    bankName: fake((f) => f.company.companyName()),
-    updatedAt: fake((f) => f.date.past()),
-    status: oneOf(TRANSACTION_STATUS),
-    notes: fake((f) => f.lorem.sentence()),
+    bankAccountName: perBuild(() => mockName('Account Holder')),
+    bankAccountNumber: perBuild(mockBankAccountNumber),
+    bankName: perBuild(() => mockName('Bank')),
+    updatedAt: perBuild(mockPastDate),
+    status: perBuild(() => pick(transactionStatuses)),
+    notes: perBuild(() => mockSentence('Note')),
   },
 })
 describe('TransactionItem', () => {
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -2,13 +2,6 @@ import type { EntryContext } from '@remix-run/node'
 import { RemixServer } from '@remix-run/react'
 import { renderToString } from 'react-dom/server'
 
-// Start MSW mock server in E2E mode to intercept external API calls
-if (process.env.RUNNING_E2E === 'true') {
-  // Dynamic import to avoid bundling MSW in production
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  require('../mocks/server').startMockServer()
-}
-
 export default function handleRequest(
   request: Request,
   responseStatusCode: number,
diff --git a/app/models/__mocks__/attachment.ts b/app/models/__mocks__/attachment.ts
@@ -1,14 +1,13 @@
-import { build, fake } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { Attachment } from '@prisma/client'
+import { mockFileUrl, mockSentence } from './mock-data'
 
 export const attachmentBuilder = build<
   Omit<Attachment, 'id' | 'createdAt' | 'updatedAt' | 'lessonId'>
 >({
   fields: {
-    name: fake((f) => `${f.lorem.sentence()}.pdf`),
-    url: fake(
-      (f) => `https://${f.internet.domainName()}/files/${f.lorem.slug()}.pdf`
-    ),
+    name: perBuild(() => `${mockSentence('Attachment')}.pdf`),
+    url: perBuild(() => mockFileUrl('pdf')),
   },
   traits: {
     actual: {
diff --git a/app/models/__mocks__/chapter.ts b/app/models/__mocks__/chapter.ts
@@ -1,11 +1,12 @@
-import { build, fake } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { Chapter } from '@prisma/client'
+import { mockSentence, randomInt } from './mock-data'
 
 export const chapterBuilder = build<
   Omit<Chapter, 'id' | 'createdAt' | 'updatedAt' | 'courseId'>
 >({
   fields: {
-    name: fake((f) => f.commerce.productName()),
-    order: fake((f) => f.datatype.number()),
+    name: perBuild(() => mockSentence('Chapter')),
+    order: perBuild(() => randomInt(1, 20)),
   },
 })
diff --git a/app/models/__mocks__/content.ts b/app/models/__mocks__/content.ts
@@ -1,17 +1,18 @@
-import { build, fake, perBuild } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { Content } from '@prisma/client'
 import { CONTENT_TYPES } from '../enum'
+import { mockParagraph, mockSentence, mockSlug, randomInt } from './mock-data'
 
 export const contentBuilder = build<
   Omit<Content, 'id' | 'createdAt' | 'updatedAt' | 'authorId' | 'courseId'>
 >({
   fields: {
-    slug: fake((f) => f.lorem.slug()),
-    name: fake((f) => f.lorem.sentence()),
-    description: fake((f) => f.lorem.paragraphs()),
+    slug: perBuild(() => mockSlug('content')),
+    name: perBuild(() => mockSentence('Content')),
+    description: perBuild(() => mockParagraph('Content description')),
     type: perBuild(() => CONTENT_TYPES.VIDEO),
     content: 'G3ZS8x86588', // YouTube video ID
-    order: fake((f) => f.datatype.number({ min: 0, max: 100 })),
+    order: perBuild(() => randomInt(0, 100)),
   },
   traits: {
     video: {
diff --git a/app/models/__mocks__/course.ts b/app/models/__mocks__/course.ts
@@ -1,15 +1,21 @@
-import { build, fake, perBuild } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { Course } from '@prisma/client'
 import { CATEGORIES } from '../enum'
+import {
+  mockImageUrl,
+  mockParagraph,
+  mockSentence,
+  randomInt,
+} from './mock-data'
 
 export const courseBuilder = build<
   Omit<Course, 'id' | 'userId' | 'authorId' | 'createdAt' | 'updatedAt'>
 >({
   fields: {
-    name: fake((f) => f.commerce.productName()),
-    description: fake((f) => f.commerce.productDescription()),
-    price: fake((f) => f.datatype.number({ min: 10000, max: 100000 })),
-    image: fake((f) => f.image.imageUrl()),
+    name: perBuild(() => mockSentence('Course')),
+    description: perBuild(() => mockParagraph('Course description')),
+    price: perBuild(() => randomInt(10_000, 100_000)),
+    image: perBuild(mockImageUrl),
     category: perBuild(() => CATEGORIES.PARENTING),
   },
 })
diff --git a/app/models/__mocks__/lesson.ts b/app/models/__mocks__/lesson.ts
@@ -1,13 +1,14 @@
-import { build, fake } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { Lesson } from '@prisma/client'
+import { mockParagraph, mockSentence, randomInt } from './mock-data'
 
 export const lessonBuilder = build<
   Omit<Lesson, 'id' | 'createdAt' | 'updatedAt' | 'chapterId'>
 >({
   fields: {
-    name: fake((f) => f.lorem.sentence()),
-    description: fake((f) => f.lorem.paragraphs()),
+    name: perBuild(() => mockSentence('Lesson')),
+    description: perBuild(() => mockParagraph('Lesson description')),
     videoId: 'G3ZS8x86588', // https://www.youtube.com/watch?v=G3ZS8x86588
-    order: fake((f) => f.datatype.number()),
+    order: perBuild(() => randomInt(1, 20)),
   },
 })
diff --git a/app/models/__mocks__/mock-data.ts b/app/models/__mocks__/mock-data.ts
@@ -0,0 +1,45 @@
+import { generateId } from '../../utils/nanoid'
+
+export function randomInt(min = 0, max = 100) {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+export function pick<T>(values: readonly T[]) {
+  return values[randomInt(0, values.length - 1)]
+}
+
+export function mockEmail() {
+  return `user-${generateId()}@rumahberbagi.test`
+}
+
+export function mockName(prefix = 'Item') {
+  return `${prefix} ${generateId()}`
+}
+
+export function mockSentence(prefix = 'Item') {
+  return `${prefix} ${generateId()}`
+}
+
+export function mockParagraph(prefix = 'Description') {
+  return `${prefix} ${generateId()} body copy.`
+}
+
+export function mockSlug(prefix = 'item') {
+  return `${prefix}-${generateId().toLowerCase()}`
+}
+
+export function mockFileUrl(extension: string, folder = 'files') {
+  return `https://example.com/${folder}/${mockSlug(folder)}.${extension}`
+}
+
+export function mockImageUrl() {
+  return `https://images.example.com/${mockSlug('image')}.jpg`
+}
+
+export function mockPastDate() {
+  return new Date(Date.now() - randomInt(1, 30) * 24 * 60 * 60 * 1000)
+}
+
+export function mockBankAccountNumber() {
+  return `${randomInt(10_000_000, 99_999_999)}`
+}
diff --git a/app/models/__mocks__/subscription.ts b/app/models/__mocks__/subscription.ts
@@ -1,4 +1,4 @@
-import { build, oneOf, perBuild } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { Subscription } from '@prisma/client'
 import { SUBSCRIPTION_STATUS } from '../enum'
 
@@ -9,7 +9,7 @@ export const subscriptionBuilder = build<
   >
 >({
   fields: {
-    status: oneOf(SUBSCRIPTION_STATUS.ACTIVE),
+    status: perBuild(() => SUBSCRIPTION_STATUS.ACTIVE),
   },
   traits: {
     active: {
diff --git a/app/models/__mocks__/transaction.ts b/app/models/__mocks__/transaction.ts
@@ -1,6 +1,7 @@
-import { build, fake, perBuild } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { Transaction } from '@prisma/client'
 import { TRANSACTION_STATUS } from '../enum'
+import { mockBankAccountNumber, mockName, randomInt } from './mock-data'
 
 export const transactionBuilder = build<
   Omit<
@@ -16,10 +17,10 @@ export const transactionBuilder = build<
   >
 >({
   fields: {
-    bankName: fake((f) => f.company.companyName()),
-    bankAccountName: fake((f) => f.name.findName()),
-    bankAccountNumber: fake((f) => f.phone.phoneNumber()),
-    amount: fake((f) => f.datatype.number({ min: 10000, max: 100000 })),
+    bankName: perBuild(() => mockName('Bank')),
+    bankAccountName: perBuild(() => mockName('Account Holder')),
+    bankAccountNumber: perBuild(mockBankAccountNumber),
+    amount: perBuild(() => randomInt(10_000, 100_000)),
     status: perBuild(() => TRANSACTION_STATUS.SUBMITTED),
   },
   traits: {
diff --git a/app/models/__mocks__/user.ts b/app/models/__mocks__/user.ts
@@ -1,18 +1,18 @@
-import { build, fake, perBuild } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { User } from '@prisma/client'
 import { ROLES } from '../enum'
+import { mockEmail, mockName } from './mock-data'
 
 type OmittedUser = Omit<User, 'id' | 'createdAt' | 'updatedAt'>
 
-export interface BuiltUser extends OmittedUser {
+export type BuiltUser = OmittedUser & {
   name: NonNullable<User['name']>
-  phoneNumber: NonNullable<User['phoneNumber']>
 }
 
 export const userBuilder = build<BuiltUser>({
   fields: {
-    email: fake((f) => f.internet.email()),
-    name: fake((f) => f.name.findName()),
+    email: perBuild(mockEmail),
+    name: perBuild(() => mockName('User')),
     role: perBuild(() => ROLES.MEMBER),
     phoneNumber: perBuild(() => '+6512345678'),
     telegram: null,
diff --git a/app/services/email.server.tsx b/app/services/email.server.tsx
@@ -1,3 +1,5 @@
+import * as fs from 'fs'
+import * as path from 'path'
 import { User } from '@prisma/client'
 import { renderToString } from 'react-dom/server'
 import type { SendEmailFunction } from 'remix-auth-email-link'
@@ -33,13 +35,27 @@ export const sendEmail: SendEmailFunction<User> = async (options) => {
     </main>
   )
 
-  // In E2E mode, MSW intercepts the Mailgun API call and captures the magic link.
-  // In development, we log the magic link for convenience.
+  // In development, log the magic link for convenience.
   if (process.env.NODE_ENV === 'development') {
     console.info(`\n🔗 Magic link: ${options.magicLink}\n`)
   }
 
-  // Send email via Mailgun API - MSW will intercept in E2E mode
+  // In E2E mode, write the magic link fixture directly for Playwright to read.
+  // This replaces MSW interception which breaks when bundled by Remix's esbuild.
+  if (process.env.RUNNING_E2E === 'true') {
+    const fixturePath = path.join(
+      process.cwd(),
+      'e2e/fixtures/magic.local.json'
+    )
+    fs.writeFileSync(
+      fixturePath,
+      JSON.stringify({ magicLink: options.magicLink }, null, 2)
+    )
+    console.info('🔶 E2E: Captured magic link:', options.magicLink)
+    return
+  }
+
+  // Send email via Mailgun API
   await emailProvider.sendEmail({
     to: options.emailAddress,
     from: emailFrom,
diff --git a/docs/testing-principles.md b/docs/testing-principles.md
@@ -21,7 +21,7 @@ velocity:
 | Vitest          | Unit testing         | `app/**/__tests__/` |
 | Testing Library | Component testing    | `app/**/__tests__/` |
 | Playwright      | End-to-end testing   | `e2e/`              |
-| MSW             | API mocking          | `mocks/`            |
+| App-level mocks | API mocking (E2E)    | `email.server.tsx`  |
 | test-data-bot   | Test data generation | `e2e/fixtures/`     |
 
 ## Unit Testing with Vitest
@@ -297,24 +297,16 @@ e2e/fixtures/
 
 ## Mocking Strategies
 
-### MSW for API Mocking
+### E2E API Mocking
 
-Mock Service Worker (MSW) intercepts network requests for isolated testing:
+External API calls (e.g. Mailgun) are mocked at the application level in E2E
+mode. When `RUNNING_E2E=true`, `email.server.tsx` writes the magic link fixture
+directly instead of calling Mailgun, bypassing the need for network-level
+interception.
 
-```typescript
-import { rest } from 'msw'
-import { setupServer } from 'msw/node'
-
-const server = setupServer(
-  rest.post('/api/login', (req, res, ctx) => {
-    return res(ctx.json({ user: { id: '1', email: 'test@example.com' } }))
-  })
-)
-
-beforeAll(() => server.listen())
-afterEach(() => server.resetHandlers())
-afterAll(() => server.close())
-```
+> **Note:** MSW was previously used but removed because its interceptors break
+> when bundled by Remix's esbuild. The app-level approach is simpler and more
+> reliable.
 
 ### Module Mocking
 
@@ -405,5 +397,5 @@ npx playwright test --trace on
 - [Vitest Documentation](https://vitest.dev/)
 - [Testing Library Docs](https://testing-library.com/docs/)
 - [Playwright Documentation](https://playwright.dev/docs/intro)
-- [MSW Documentation](https://mswjs.io/docs/)
+- [Remix Testing Guide](https://remix.run/docs/en/main/guides/testing)
 - [test-data-bot](https://github.com/jackfranklin/test-data-bot)
diff --git a/mocks/handlers.ts b/mocks/handlers.ts
diff --git a/mocks/server.ts b/mocks/server.ts
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
