fix integration tests

mocks/handlers.ts

@@ -1,13 +1,10 @@
 import { http, HttpResponse, passthrough } from "msw";
-import {
-  collectionItem,
-  oneCollectionListData,
-} from "~/src/__tests__/fixtures/CollectionFixture";
+import { oneCollectionListData } from "~/src/__tests__/fixtures/CollectionFixture";
 import { workDetailWithUp } from "~/src/__tests__/fixtures/WorkDetailFixture";
 import {
   API_URL,
   COLLECTION_LIST_PATH,
-  COLLECTION_PATH,
+  INVALID_COLLECTION_PATH,
   DOWNLOAD_PATH,
   FULFILL_PATH,
   LIMITED_ACCESS_WORK_PATH,
@@ -22,7 +19,10 @@ const workUrl = new URL(LIMITED_ACCESS_WORK_PATH, API_URL).toString();
 const fulfillUrl = new URL(FULFILL_PATH, API_URL).toString();
 const downloadUrl = new URL(DOWNLOAD_PATH, API_URL).toString();
 const collectionListUrl = new URL(COLLECTION_LIST_PATH, API_URL).toString();
-const collectionUrl = new URL(COLLECTION_PATH, API_URL).toString();
+const invalidCollectionUrl = new URL(
+  INVALID_COLLECTION_PATH,
+  API_URL
+).toString();
 
 /** A collection of handlers to be used by default for all tests. */
 const handlers = [
@@ -68,8 +68,12 @@ const handlers = [
     return HttpResponse.json(oneCollectionListData);
   }),
 
-  http.get(collectionUrl, () => {
-    return HttpResponse.json(collectionItem);
+  http.get(invalidCollectionUrl, () => {
+    return HttpResponse.json({
+      status: 500,
+      title: "Something went wrong",
+      detail: "An unknown error occurred on the server",
+    });
   }),
 ];
 

mocks/index.ts

@@ -1,4 +1,4 @@
-async function initMocks() {
+export async function initMocks() {
   if (typeof window === "undefined") {
     const { server } = await import("./server");
     server.listen({
@@ -12,6 +12,4 @@ async function initMocks() {
   }
 }
 
-initMocks();
-
 export {};

mocks/mockEnv.ts

@@ -7,4 +7,5 @@ export const DOWNLOAD_PATH = "/test-download-pdf";
 export const HOME_PATH = "/";
 export const COLLECTION_LIST_PATH = "/collection/list";
 export const COLLECTION_PATH =
-  "/collection/978ea0e0-8ecc-4de2-bfe8-032fea641d8e";
+  "/collection/978ea0e0-8ecc-4de2-bfe8-032fea641d8e?page=1";
+export const INVALID_COLLECTION_PATH = "/collection/invalid-collection";

package.json

@@ -65,9 +65,6 @@
     "prettier": "^2.2.1",
     "ts-node": "^10.9.1"
   },
-  "resolutions": {
-    "@types/react": "^17.0.2"
-  },
   "msw": {
     "workerDirectory": "public"
   }

playwright/integration/landing.spec.ts

@@ -1,7 +1,10 @@
 import { test, expect } from "../support/test-utils";
-import { API_URL, COLLECTION_PATH, HOME_PATH } from "~/mocks/mockEnv";
+import {
+  INVALID_COLLECTION_PATH,
+  HOME_PATH,
+  COLLECTION_PATH,
+} from "~/mocks/mockEnv";
 import { server } from "~/mocks/server";
-import { HttpResponse } from "msw";
 
 test.afterEach(() => server.resetHandlers());
 test.afterAll(() => server.close());
@@ -13,26 +16,16 @@ test("View landing page with collection", async ({ page, port }) => {
     level: 2,
   });
   expect(collectionHeading).toBeVisible();
-  const collectionLink = page.getByRole("link", {
-    name: /Baseball: A Collection by Mike Benowitz/,
-  });
-  await expect(collectionLink).toHaveAttribute("href", COLLECTION_PATH);
+  const collectionLink = await page
+    .getByRole("link", {
+      name: /Baseball: A Collection by Mike Benowitz/,
+    })
+    .getAttribute("href");
+  expect(collectionLink).toContain(COLLECTION_PATH);
 });
 
-test("Shows error boundary on error", async ({ page, port, http }) => {
-  await page.goto(`http://localhost:${port}${HOME_PATH}`);
-  server.use(
-    http.get(new RegExp(API_URL), async () => {
-      return HttpResponse.json(
-        {
-          status: 500,
-          title: "Something went wrong",
-          detail: "An unknown error occurred on the server",
-        },
-        { status: 500 }
-      );
-    })
-  );
+test("Shows error boundary for invalid collection", async ({ page, port }) => {
+  await page.goto(`http://localhost:${port}${INVALID_COLLECTION_PATH}`);
 
   const alert = page.getByRole("alert");
   const errorText = alert.getByText("An error 500 occurred on server");

src/components/ErrorBoundary.tsx

@@ -14,7 +14,11 @@ class ErrorBoundary extends React.Component<
   ErrorBoundaryProps,
   ErrorBoundaryState
 > {
-  state = { error: undefined, info: undefined };
+  constructor(props) {
+    super(props);
+
+    this.state = { error: undefined, info: undefined };
+  }
 
   static getDerivedStateFromError(error: Error) {
     return { error };
@@ -32,7 +36,7 @@ class ErrorBoundary extends React.Component<
     const { error } = this.state;
 
     if (error) {
-      return <Error statusCode={error.statusCode} />;
+      return <Error statusCode={error} />;
     }
 
     return this.props.children;

src/pages/_app.tsx

@@ -16,7 +16,8 @@ import NewRelicSnippet from "../lib/newrelic/NewRelic";
 import ErrorBoundary from "../components/ErrorBoundary";
 
 if (process.env.APP_ENV === "testing") {
-  require("mocks");
+  const { initMocks } = await import("mocks");
+  await initMocks();
 }
 
 /**
@@ -91,8 +92,8 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
 
         <link rel="icon" href={appConfig.favIconPath} />
       </Head>
-      <NewRelicSnippet />
       <ErrorBoundary>
+        <NewRelicSnippet />
         <FeatureFlagProvider>
           <Component {...pageProps} />
         </FeatureFlagProvider>

tsconfig.json

@@ -1,17 +1,11 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "target": "es2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
     "moduleResolution": "node",
     "baseUrl": ".",
     "paths": {
-      "~/*": [
-        "*"
-      ]
+      "~/*": ["*"]
     },
     "allowJs": true,
     "skipLibCheck": true,
@@ -46,9 +40,5 @@
     "src/components/RequestDigital/RequestDigital.jsx",
     "src/__tests__/index.test.tsx"
   ],
-  "exclude": [
-    "node_modules",
-    "jest.config.ts",
-    "setupTests.js"
-  ]
+  "exclude": ["node_modules", "jest.config.ts", "setupTests.js"]
 }