fix msw warnings and place the images not in a root dir during dev

Author: kentcdodds

.gitignore

@@ -1,7 +1,6 @@
 node_modules
 .DS_store
 
-/data
 /build
 /server-build
 .env
@@ -16,6 +15,7 @@ node_modules
 /playwright/.cache/
 /tests/fixtures/email/
 /tests/fixtures/uploaded/
+/tests/fixtures/openimg/
 /coverage
 
 /other/cache.db

app/routes/resources+/images.tsx

@@ -1,16 +1,20 @@
 import { getImgResponse } from 'openimg/node'
-import { type Route } from './+types/images.ts'
 import { getDomainUrl } from '#app/utils/misc.tsx'
+import { type Route } from './+types/images.ts'
 
 export async function loader({ request }: Route.LoaderArgs) {
 	const domain = getDomainUrl(request)
 	const headers = new Headers()
 	headers.set('Cache-Control', 'public, max-age=31536000, immutable')
 	return getImgResponse(request, {
 		headers,
-		allowlistedOrigins: [domain, process.env.AWS_ENDPOINT_URL_S3],
+		allowlistedOrigins: [domain, process.env.AWS_ENDPOINT_URL_S3].filter(
+			Boolean,
+		),
 		cacheFolder:
-			process.env.NODE_ENV === 'production' ? '/data/images' : './data/images',
+			process.env.NODE_ENV === 'production'
+				? '/data/images'
+				: './tests/fixtures/openimg',
 		getImgSource: ({ params }) => {
 			if (params.src.startsWith('/resources')) {
 				// Fetch image from resource endpoint

tests/mocks/index.ts

@@ -19,6 +19,10 @@ server.listen({
 		if (request.url.includes('.sentry.io')) {
 			return
 		}
+		// Do not print warnings on unhandled requests to ourselves
+		if (request.url.includes(`localhost:${process.env.PORT}`)) {
+			return
+		}
 		// Print the regular MSW unhandled request warning otherwise.
 		print.warning()
 	},