Adds test

app/App.test.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { App } from "App";
+import { HelmetProvider } from "react-helmet-async";
+import { AppProvider } from "utils";
+
+jest.mock("instantsearch.js/es/lib/routers", () => ({}));
+jest.mock("./utils/useAppContext", () => ({
+  AppProvider: jest.fn(),
+}));
+
+describe("<App />", () => {
+  it("renders", async () => {
+    render(
+      <HelmetProvider>
+        <App />
+      </HelmetProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("app-container")).toBeInTheDocument();
+    });
+  });
+
+  // Generally we want to avoid testing prop passing directly, and instead
+  // figure out a test that reflects real user behavior to confirm the props.
+  // Let's use this for the time being until we have a better way to test these
+  // props being set on page load. It may make sense to move the data fetching
+  // and setting to a hook we can test independently.
+  it("sends the correct props to the <AppProvider />", async () => {
+    const expectedArg1 = expect.objectContaining({
+      aroundLatLng: "37.7749,-122.4194",
+      userLocation: { lat: 37.7749, lng: -122.4194 },
+      aroundUserLocationRadius: "all",
+      setAroundRadius: expect.any(Function),
+      setAroundLatLng: expect.any(Function),
+    });
+    const expectedArg2 = {};
+
+    render(
+      <HelmetProvider>
+        <App />
+      </HelmetProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    await waitFor(() => {
+      expect(AppProvider).toHaveBeenCalledWith(expectedArg1, expectedArg2);
+    });
+  });
+});

app/App.tsx

@@ -56,6 +56,8 @@ export const App = () => {
   }, [location, setAroundLatLng]);
 
   if (!userLocation) {
+    console.log("🪵 ~ App ~ userLocation:", userLocation);
+
     return <Loader />;
   }
 
@@ -66,9 +68,14 @@ export const App = () => {
     aroundUserLocationRadius,
     setAroundRadius,
   };
+  console.log("🪵 ~ App ~ props:", props);
 
   return (
-    <div id={OUTER_CONTAINER_ID} className={styles.outerContainer}>
+    <div
+      id={OUTER_CONTAINER_ID}
+      className={styles.outerContainer}
+      data-testid={"app-container"}
+    >
       <AppProvider {...props}>
         <Helmet>
           <title>{title}</title>

app/pages/EventDetailPage/EventDetailPage.test.tsx

@@ -1,10 +1,7 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import { EventDetailPage } from "pages/EventDetailPage/EventDetailPage";
-import {
-  createFormattedEventData,
-  EVENTS_DATA,
-} from "../../../test/fixtures/EventsData";
+import { createFormattedEventData } from "../../../test/fixtures/EventsData";
 import { useEventData } from "hooks/StrapiAPI";
 import { HelmetProvider } from "react-helmet-async";
 

app/utils/useAppContext.tsx

@@ -3,7 +3,6 @@ import React, {
   useMemo,
   createContext,
   useContext,
-  useState,
   Dispatch,
   SetStateAction,
 } from "react";

jest.config.ts

@@ -68,7 +68,10 @@ const config: Config = {
 
   // A set of global variables that need to be available in all test environments
   globals: {
-    CONFIG: {},
+    CONFIG: {
+      ALGOLIA_APPLICATION_ID: "ALGOLIA_APPLICATION_ID",
+      ALGOLIA_READ_ONLY_API_KEY: "ALGOLIA_READ_ONLY_API_KEY",
+    },
   },
 
   // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.

test/templates/Template.test.tsx

@@ -5,12 +5,15 @@
  * coding from there!
  */
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 
 // Normally imported from components directory
 const MyFakeComponent = ({ text }: { text: string }) => <>{text}</>;
 
+// Put any module mocks outside test blocks
+jest.mock("<my-module>", () => (<'mock implementation'>));
+
 describe("<MyFakeComponent />", () => {
   const parameters = {
     text: "expected content",
@@ -22,4 +25,14 @@ describe("<MyFakeComponent />", () => {
       parameters.text
     );
   });
+
+  it("renders with async effects", async () => {
+    render(<MyFakeComponent {...parameters} />, { wrapper: BrowserRouter });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("my-component-test-id")).toHaveTextContent(
+        parameters.text
+      );
+    });
+  });
 });