Merge pull request #529 from NYPL/SFR-1798/use-custom-render

SFR-1798: Update tests to use custom render function

CHANGELOG.md

@@ -14,6 +14,7 @@
 - Update newrelic to 12.5.0 and @newrelic/next to 0.10.0
 - Add error logging to New Relic for API route errors and client side errors
 - Update `actions/checkout`, `actions/setup-node`, `aws-actions/configure-aws-credentials`, and `aws-actions/amazon-ecr-login` Github action versions
+- Update unit tests to use custom render function
 
 ## [0.18.2]
 

jest.setup.ts

@@ -2,3 +2,5 @@ import "@testing-library/jest-dom";
 
 import { MatchMedia } from "@nypl/design-system-react-components";
 new MatchMedia();
+
+jest.mock("next/router", () => require("next-router-mock"));

src/__tests__/AdvancedSearch.test.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import AdvancedSearch from "../components/AdvancedSearch/AdvancedSearch";
-import { render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { FilterLanguagesCommonTests } from "./componentHelpers/FilterLanguages";
 import { FilterYearsTests } from "./componentHelpers/FilterYears";
 import { FilterFormatTests } from "./componentHelpers/FilterFormats";
 import userEvent from "@testing-library/user-event";
 import { errorMessagesText, inputTerms } from "../constants/labels";
 import { ApiLanguageResponse } from "../types/LanguagesQuery";
 import mockRouter from "next-router-mock";
-jest.mock("next/router", () => require("next-router-mock"));
+import { render } from "./testUtils/render";
 
 const defaultLanguages: ApiLanguageResponse = {
   status: 200,

src/__tests__/Search.test.tsx

@@ -18,8 +18,6 @@ import { findFiltersForField } from "../util/SearchQueryUtils";
 import filterFields from "../constants/filters";
 import mockRouter from "next-router-mock";
 
-jest.mock("next/router", () => require("next-router-mock"));
-
 const searchResults: ApiSearchResult = require("./fixtures/results-list.json");
 const searchQuery: SearchQuery = {
   queries: [{ field: SearchField.Keyword, query: "Animal Crossing" }],

src/__tests__/testUtils/render.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, RenderOptions } from "@testing-library/react";
+import { render, RenderOptions, RenderResult } from "@testing-library/react";
 import { ReactElement } from "react";
 import { FeatureFlagProvider } from "~/src/context/FeatureFlagContext";
 import { FeedbackProvider } from "~/src/context/FeedbackContext";
@@ -15,8 +15,8 @@ const Providers = ({ children }) => {
 const customRender = (
   ui: ReactElement,
   options?: Omit<RenderOptions, "wrapper">
-) => {
-  render(ui, { wrapper: Providers, ...options });
+): RenderResult => {
+  return render(ui, { wrapper: Providers, ...options });
 };
 
 export * from "@testing-library/react";

src/components/About/About.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
+import { render } from "~/src/__tests__/testUtils/render";
 import AboutPage from "./About";
-import { render } from "@testing-library/react";
 
 it("renders about unchanged", async () => {
   const tree = render(<AboutPage />);

src/components/Collection/Collection.test.tsx

@@ -11,8 +11,6 @@ import {
 import mockRouter from "next-router-mock";
 import userEvent from "@testing-library/user-event";
 
-jest.mock("next/router", () => require("next-router-mock"));
-
 const collectionResults: CollectionResult = collectionData;
 const collectionQuery: CollectionQuery = {
   identifier: "id",

src/components/CollectionCard/CollectionCard.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import CollectionCard from "./CollectionCard";
-import { screen, render } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { collectionData } from "~/src/__tests__/fixtures/CollectionFixture";
+import { render } from "~/src/__tests__/testUtils/render";
 
 describe("Collection list", () => {
   beforeEach(() => {

src/components/CollectionItemCard/CollectionItemCard.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { screen, render } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { CollectionItemCard } from "./CollectionItemCard";
 import { collectionItem } from "~/src/__tests__/fixtures/CollectionFixture";
+import { render } from "~/src/__tests__/testUtils/render";
 
 describe("Collection Item Card", () => {
   beforeEach(() => {

src/components/CollectionList/CollectionList.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import CollectionList from "./CollectionList";
-import { screen, render } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { oneCollectionListData } from "~/src/__tests__/fixtures/CollectionFixture";
+import { render } from "~/src/__tests__/testUtils/render";
 
 // describe("Collection list", () => {
 //   beforeEach(() => {

src/components/EditionCard/EditionCard.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { EditionCard } from "./EditionCard";
-import { screen, render } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { PLACEHOLDER_COVER_LINK } from "~/src/constants/editioncard";
 import {
   eddEdition,
@@ -9,8 +9,7 @@ import {
 } from "~/src/__tests__/fixtures/EditionCardFixture";
 import { NYPL_SESSION_ID } from "~/src/constants/auth";
 import { Cookies, CookiesProvider } from "react-cookie";
-
-jest.mock("next/router", () => require("next-router-mock"));
+import { render } from "~/src/__tests__/testUtils/render";
 
 describe("Edition Card with Valid Data", () => {
   beforeEach(() => {

src/components/EditionDetail/Edition.test.tsx

@@ -1,15 +1,14 @@
 import React from "react";
 import Edition from "./Edition";
-import { screen, render, within } from "@testing-library/react";
+import { screen, within } from "@testing-library/react";
 import { breadcrumbTitles, inputTerms } from "~/src/constants/labels";
 import {
   editionDetail as apiEdition,
   editionDetailInCollection,
 } from "../../__tests__/fixtures/EditionDetailFixture";
 import mockRouter from "next-router-mock";
 import userEvent from "@testing-library/user-event";
-
-jest.mock("next/router", () => require("next-router-mock"));
+import { render } from "~/src/__tests__/testUtils/render";
 
 const backUrl = "/search?query=author%3AEdgar%2C+John%2C+1876-";
 

src/components/EditionDetailDefinitionList/EditionDetailDefinitionList.test.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import EditionDetailDefinitionList from "./EditionDetailDefinitionList";
-import { screen, render } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { ApiEdition } from "~/src/types/EditionQuery";
 import { editionDetail as editionDetailFullData } from "../../__tests__/fixtures/EditionDetailFixture";
+import { render } from "~/src/__tests__/testUtils/render";
 
 describe("Edition Detail table with all information", () => {
   beforeEach(() => {

src/components/Feedback/Feedback.test.tsx

@@ -3,7 +3,6 @@ import { render } from "../../__tests__/testUtils/render";
 import { screen } from "@testing-library/react";
 import Feedback from "./Feedback";
 import userEvent from "@testing-library/user-event";
-jest.mock("next/router", () => require("next-router-mock"));
 
 describe("Feedback", () => {
   beforeEach(() => {

src/components/InstanceCard/InstanceCard.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { InstanceCard } from "./InstanceCard";
-import { screen, render } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { Instance, WorkEdition } from "~/src/types/DataModel";
 import { PLACEHOLDER_COVER_LINK } from "~/src/constants/editioncard";
 import {
@@ -14,8 +14,7 @@ import {
   upInstance,
 } from "~/src/__tests__/fixtures/InstanceCardFixture";
 import { Cookies, CookiesProvider } from "react-cookie";
-
-jest.mock("next/router", () => require("next-router-mock"));
+import { render } from "~/src/__tests__/testUtils/render";
 
 describe("Instance Card with Valid Data", () => {
   beforeEach(() => {

src/components/Landing/Landing.test.tsx

@@ -1,17 +1,17 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import LandingPage from "./Landing";
 import {
   searchFormRenderTests,
   searchFormTests,
 } from "../../__tests__/componentHelpers/SearchForm";
 
-jest.mock("next/router", () => require("next-router-mock"));
 import mockRouter from "next-router-mock";
 import {
   collectionListData,
   collections,
 } from "~/src/__tests__/fixtures/CollectionFixture";
+import { render } from "~/src/__tests__/testUtils/render";
 
 describe("Renders Index Page", () => {
   beforeEach(async () => {

src/components/Layout/Layout.test.tsx

@@ -2,7 +2,6 @@ import { render } from "../../__tests__/testUtils/render";
 import { screen } from "@testing-library/react";
 import React from "react";
 import Layout from "./Layout";
-jest.mock("next/router", () => require("next-router-mock"));
 
 describe("Layout component", () => {
   beforeEach(() => {

src/components/License/License.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { render } from "~/src/__tests__/testUtils/render";
 import License from "./License";
 
 it("renders License page unchanged", async () => {

src/components/Loading/Loading.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import React from "react";
+import { render } from "~/src/__tests__/testUtils/render";
 import Loading from "./Loading";
 
 describe("Loading page", () => {

src/components/Work/Work.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Work from "./Work";
-import { screen, render, within } from "@testing-library/react";
+import { screen, within } from "@testing-library/react";
 import { breadcrumbTitles, inputTerms } from "~/src/constants/labels";
 import {
   workDetail as apiWork,
@@ -9,8 +9,7 @@ import {
 } from "../../__tests__/fixtures/WorkDetailFixture";
 import mockRouter from "next-router-mock";
 import userEvent from "@testing-library/user-event";
-
-jest.mock("next/router", () => require("next-router-mock"));
+import { render } from "~/src/__tests__/testUtils/render";
 
 const backUrl = "/search?query=keyword%3AYoruba&sort=title%3ADESC";
 

src/components/WorkDetailDefinitionList/WorkDetailDefinitionList.test.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import WorkDetailDefinitionList from "./WorkDetailDefinitionList";
-import { screen, render } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { ApiWork } from "~/src/types/WorkQuery";
 import { workDetail as apiWork } from "../../__tests__/fixtures/WorkDetailFixture";
+import { render } from "~/src/__tests__/testUtils/render";
 
 describe("Work Detail table with all information", () => {
   beforeEach(() => {

src/util/__tests__/LinkUtils.test.tsx

@@ -4,7 +4,6 @@ import {
   getBackUrl,
 } from "../LinkUtils";
 import mockRouter from "next-router-mock";
-jest.mock("next/router", () => require("next-router-mock"));
 
 describe("Generates back url", () => {
   const host = "drb-qa.nypl.org";