make tests more reliable

Author: kentcdodds

exercises/03.complex/01.problem.iframe/app/routes/healthcheck.tsx

@@ -4,6 +4,12 @@
 import * as react from 'react'
 import * as errorBoundary from 'react-error-boundary'
 import * as misc from '#app/utils/misc.ts'
+import { type Route } from './+types/healthcheck.tsx'
+
+export async function loader({ context }: Route.LoaderArgs) {
+	await context.db.getEntries()
+	return { ok: true }
+}
 
 export default function Healthcheck() {
 	react.useEffect(() => {

exercises/03.complex/01.solution.iframe/app/routes/healthcheck.tsx

@@ -4,6 +4,12 @@
 import * as react from 'react'
 import * as errorBoundary from 'react-error-boundary'
 import * as misc from '#app/utils/misc.ts'
+import { type Route } from './+types/healthcheck.tsx'
+
+export async function loader({ context }: Route.LoaderArgs) {
+	await context.db.getEntries()
+	return { ok: true }
+}
 
 export default function Healthcheck() {
 	react.useEffect(() => {

exercises/03.complex/02.problem.ready/app/routes/healthcheck.tsx

@@ -4,6 +4,12 @@
 import * as react from 'react'
 import * as errorBoundary from 'react-error-boundary'
 import * as misc from '#app/utils/misc.ts'
+import { type Route } from './+types/healthcheck.tsx'
+
+export async function loader({ context }: Route.LoaderArgs) {
+	await context.db.getEntries()
+	return { ok: true }
+}
 
 export default function Healthcheck() {
 	react.useEffect(() => {

exercises/03.complex/02.problem.ready/test/index.test.ts

@@ -1,7 +1,7 @@
 import { invariant } from '@epic-web/invariant'
 import { Client } from '@modelcontextprotocol/sdk/client'
 import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js'
-import { chromium } from 'playwright'
+import { chromium, type Page } from 'playwright'
 import { test, expect, inject } from 'vitest'
 import { z } from 'zod'
 
@@ -56,16 +56,16 @@ test('journal viewer sends ui-lifecycle-iframe-ready message', async () => {
 		.object({ resource: z.object({}).passthrough() })
 		.parse(result.content[0])
 
-	// pre-fetch because vite may need to optimize deps 🙃 https://x.com/kentcdodds/status/1972793943265038731
-	await fetch(resource.text as string, { method: 'HEAD' })
-
 	const url = new URL('http://localhost:7787/mcp-ui-renderer')
 	url.searchParams.set('resourceData', JSON.stringify(resource))
 
 	await using browserSetup = await setupBrowser()
 	const { page } = browserSetup
 
 	await page.goto(url.toString())
+
+	await handleViteDeps(page)
+
 	await page
 		.getByRole('log')
 		.getByText('ui-lifecycle-iframe-ready')
@@ -77,3 +77,20 @@ test('journal viewer sends ui-lifecycle-iframe-ready message', async () => {
 			)
 		})
 })
+
+// because vite needs to optimize deps 😭😡
+async function handleViteDeps(page: Page) {
+	await page
+		.frameLocator('iframe')
+		.locator('vite-error-overlay')
+		.waitFor({ timeout: 200 })
+		.then(
+			async () => {
+				await page.reload()
+				await new Promise((resolve) => setTimeout(resolve, 400))
+			},
+			() => {
+				// good...
+			},
+		)
+}

exercises/03.complex/02.solution.ready/app/routes/healthcheck.tsx

@@ -4,6 +4,12 @@
 import * as react from 'react'
 import * as errorBoundary from 'react-error-boundary'
 import * as misc from '#app/utils/misc.ts'
+import { type Route } from './+types/healthcheck.tsx'
+
+export async function loader({ context }: Route.LoaderArgs) {
+	await context.db.getEntries()
+	return { ok: true }
+}
 
 export default function Healthcheck() {
 	react.useEffect(() => {

exercises/03.complex/02.solution.ready/test/index.test.ts

@@ -1,7 +1,7 @@
 import { invariant } from '@epic-web/invariant'
 import { Client } from '@modelcontextprotocol/sdk/client'
 import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js'
-import { chromium } from 'playwright'
+import { chromium, type Page } from 'playwright'
 import { test, expect, inject } from 'vitest'
 import { z } from 'zod'
 
@@ -56,16 +56,16 @@ test('journal viewer sends ui-lifecycle-iframe-ready message', async () => {
 		.object({ resource: z.object({}).passthrough() })
 		.parse(result.content[0])
 
-	// pre-fetch because vite may need to optimize deps 🙃 https://x.com/kentcdodds/status/1972793943265038731
-	await fetch(resource.text as string, { method: 'HEAD' })
-
 	const url = new URL('http://localhost:7787/mcp-ui-renderer')
 	url.searchParams.set('resourceData', JSON.stringify(resource))
 
 	await using browserSetup = await setupBrowser()
 	const { page } = browserSetup
 
 	await page.goto(url.toString())
+
+	await handleViteDeps(page)
+
 	await page
 		.getByRole('log')
 		.getByText('ui-lifecycle-iframe-ready')
@@ -77,3 +77,20 @@ test('journal viewer sends ui-lifecycle-iframe-ready message', async () => {
 			)
 		})
 })
+
+// because vite needs to optimize deps 😭😡
+async function handleViteDeps(page: Page) {
+	await page
+		.frameLocator('iframe')
+		.locator('vite-error-overlay')
+		.waitFor({ timeout: 200 })
+		.then(
+			async () => {
+				await page.reload()
+				await new Promise((resolve) => setTimeout(resolve, 400))
+			},
+			() => {
+				// good...
+			},
+		)
+}

exercises/03.complex/03.problem.sizing/app/routes/healthcheck.tsx

@@ -4,6 +4,12 @@
 import * as react from 'react'
 import * as errorBoundary from 'react-error-boundary'
 import * as misc from '#app/utils/misc.ts'
+import { type Route } from './+types/healthcheck.tsx'
+
+export async function loader({ context }: Route.LoaderArgs) {
+	await context.db.getEntries()
+	return { ok: true }
+}
 
 export default function Healthcheck() {
 	react.useEffect(() => {

exercises/03.complex/03.solution.sizing/app/routes/healthcheck.tsx

@@ -4,6 +4,12 @@
 import * as react from 'react'
 import * as errorBoundary from 'react-error-boundary'
 import * as misc from '#app/utils/misc.ts'
+import { type Route } from './+types/healthcheck.tsx'
+
+export async function loader({ context }: Route.LoaderArgs) {
+	await context.db.getEntries()
+	return { ok: true }
+}
 
 export default function Healthcheck() {
 	react.useEffect(() => {

exercises/03.complex/04.problem.dynamic-sizing/app/routes/healthcheck.tsx

@@ -4,6 +4,12 @@
 import * as react from 'react'
 import * as errorBoundary from 'react-error-boundary'
 import * as misc from '#app/utils/misc.ts'
+import { type Route } from './+types/healthcheck.tsx'
+
+export async function loader({ context }: Route.LoaderArgs) {
+	await context.db.getEntries()
+	return { ok: true }
+}
 
 export default function Healthcheck() {
 	react.useEffect(() => {

exercises/03.complex/04.problem.dynamic-sizing/test/index.test.ts

@@ -1,7 +1,7 @@
 import { invariant } from '@epic-web/invariant'
 import { Client } from '@modelcontextprotocol/sdk/client'
 import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js'
-import { chromium } from 'playwright'
+import { chromium, type Page } from 'playwright'
 import { test, expect, inject } from 'vitest'
 import { z } from 'zod'
 
@@ -56,15 +56,14 @@ test('journal viewer sends ui-size-change message', async () => {
 		.object({ resource: z.object({}).passthrough() })
 		.parse(result.content[0])
 
-	// pre-fetch because vite may need to optimize deps 🙃 https://x.com/kentcdodds/status/1972793943265038731
-	await fetch(resource.text as string, { method: 'HEAD' })
-
 	const url = new URL('http://localhost:7787/mcp-ui-renderer')
 	url.searchParams.set('resourceData', JSON.stringify(resource))
 
 	await using browserSetup = await setupBrowser()
 	const { page } = browserSetup
 
+	await handleViteDeps(page)
+
 	await page.goto(url.toString())
 	const message = page.getByRole('log').getByText('ui-size-change')
 	await message.waitFor({ timeout: 1000 }).catch((e) => {
@@ -74,9 +73,10 @@ test('journal viewer sends ui-size-change message', async () => {
 		)
 	})
 
-	const textContent = JSON.parse(await message.textContent())
+	const textContent = await message.textContent()
+	const messageContent = JSON.parse(textContent!)
 	expect(
-		textContent,
+		messageContent,
 		'🚨 the ui-size-change message is not the correct format',
 	).toEqual({
 		type: 'ui-size-change',
@@ -86,3 +86,20 @@ test('journal viewer sends ui-size-change message', async () => {
 		},
 	})
 })
+
+// because vite needs to optimize deps 😭😡
+async function handleViteDeps(page: Page) {
+	await page
+		.frameLocator('iframe')
+		.locator('vite-error-overlay')
+		.waitFor({ timeout: 200 })
+		.then(
+			async () => {
+				await page.reload()
+				await new Promise((resolve) => setTimeout(resolve, 400))
+			},
+			() => {
+				// good...
+			},
+		)
+}