build(deps): bump @testing-library/react-native to latest (#11280)

* build(deps): bump @testing-library/react-native to latest * refactor: remove deprecated jest matchers * fix: multiple tests * fix: more tests * fix: type issue * fix some more * fix: more * fix: more tests * more * fix: more tesstststststs * moooooooooooore * more tests * moreeee * fix moreee * final? * last
artsy · Jan 2, 2025 · ed3e9a1 · ed3e9a1
1 parent a04dab7
commit ed3e9a1
Show file tree

Hide file tree

Showing 53 changed files with 841 additions and 856 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -8,7 +8,7 @@ module.exports = {
   rootDir: "./",
   setupFilesAfterEnv: [
     "jest-extended/all",
-    "@testing-library/jest-native/extend-expect",
+    "@testing-library/react-native/extend-expect",
     "./src/setupJest.tsx",
     "./node_modules/react-native-gesture-handler/jestSetup.js",
   ],

diff --git a/package.json b/package.json
@@ -111,7 +111,7 @@
   },
   "dependencies": {
     "@artsy/cohesion": "4.222.0",
-    "@artsy/palette-mobile": "14.0.13",
+    "@artsy/palette-mobile": "14.0.14",
     "@artsy/to-title-case": "1.1.0",
     "@braze/react-native-sdk": "11.0.0",
     "@expo/react-native-action-sheet": "4.0.1",
@@ -226,9 +226,8 @@
     "@react-native/eslint-config": "0.76.5",
     "@react-native/metro-config": "0.76.5",
     "@react-native/typescript-config": "0.76.5",
-    "@testing-library/jest-native": "5.4.3",
     "@testing-library/react-hooks": "8.0.1",
-    "@testing-library/react-native": "12.4.5",
+    "@testing-library/react-native": "12.9.0",
     "@types/argparse": "2.0.10",
     "@types/autosuggest-highlight": "3.2.3",
     "@types/chalk": "2.2.0",

diff --git a/src/app/Components/ArtworkFilter/Filters/AdditionalGeneIDsOptions.tests.tsx b/src/app/Components/ArtworkFilter/Filters/AdditionalGeneIDsOptions.tests.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, within } from "@testing-library/react-native"
+import { fireEvent, screen } from "@testing-library/react-native"
 import { Aggregations, FilterParamName } from "app/Components/ArtworkFilter/ArtworkFilterHelpers"
 import {
   ArtworkFiltersState,
@@ -60,21 +60,19 @@ describe("AdditionalGeneIDsOptions Screen", () => {
   }
 
   it("renders the options", () => {
-    const { getByText } = renderWithWrappers(
-      <MockAdditionalGeneIDsOptionsScreen initialData={initialState} />
-    )
-
-    expect(getByText("Prints")).toBeTruthy()
-    expect(getByText("Design")).toBeTruthy()
-    expect(getByText("Sculpture")).toBeTruthy()
-    expect(getByText("Work on Paper")).toBeTruthy()
-    expect(getByText("Painting")).toBeTruthy()
-    expect(getByText("Drawing")).toBeTruthy()
-    expect(getByText("Jewelry")).toBeTruthy()
-    expect(getByText("Photography")).toBeTruthy()
+    renderWithWrappers(<MockAdditionalGeneIDsOptionsScreen initialData={initialState} />)
+
+    expect(screen.getByText("Prints")).toBeTruthy()
+    expect(screen.getByText("Design")).toBeTruthy()
+    expect(screen.getByText("Sculpture")).toBeTruthy()
+    expect(screen.getByText("Work on Paper")).toBeTruthy()
+    expect(screen.getByText("Painting")).toBeTruthy()
+    expect(screen.getByText("Drawing")).toBeTruthy()
+    expect(screen.getByText("Jewelry")).toBeTruthy()
+    expect(screen.getByText("Photography")).toBeTruthy()
   })
 
-  it.skip("displays the number of the selected filters on the filter modal screen", () => {
+  it("displays the number of the selected filters on the filter modal screen", () => {
     const injectedState: ArtworkFiltersState = {
       selectedFilters: [
         {
@@ -96,9 +94,9 @@ describe("AdditionalGeneIDsOptions Screen", () => {
       sizeMetric: "cm",
     }
 
-    const { getByText } = renderWithWrappers(<MockFilterScreen initialState={injectedState} />)
+    renderWithWrappers(<MockFilterScreen initialState={injectedState} />)
 
-    expect(within(getByText("Medium")).getByText("• 2")).toBeTruthy()
+    expect(screen.getByText("Medium • 2")).toBeOnTheScreen()
   })
 
   it("toggles selected filters 'ON' and unselected filters 'OFF", () => {
@@ -123,14 +121,17 @@ describe("AdditionalGeneIDsOptions Screen", () => {
       sizeMetric: "cm",
     }
 
-    const { getAllByA11yState } = renderWithWrappers(
-      <MockAdditionalGeneIDsOptionsScreen initialData={injectedState} />
-    )
-    const options = getAllByA11yState({ checked: true })
+    renderWithWrappers(<MockAdditionalGeneIDsOptionsScreen initialData={injectedState} />)
+    const option1 = screen.getByText("Prints")
+    const option2 = screen.getByText("Sculpture")
 
-    expect(options).toHaveLength(2)
-    expect(options[0]).toHaveTextContent("Prints")
-    expect(options[1]).toHaveTextContent("Sculpture")
+    expect(option1).toBeOnTheScreen()
+    expect(option2).toBeOnTheScreen()
+
+    const checkbox = screen.getAllByTestId("multi-select-option-checkbox")
+
+    expect(checkbox[0]).toHaveProp("selected", true)
+    expect(checkbox[2]).toHaveProp("selected", true)
   })
 
   it("clears all when clear button is tapped", () => {
@@ -155,14 +156,12 @@ describe("AdditionalGeneIDsOptions Screen", () => {
       sizeMetric: "cm",
     }
 
-    const { getByText, queryAllByA11yState } = renderWithWrappers(
-      <MockAdditionalGeneIDsOptionsScreen initialData={injectedState} />
-    )
+    renderWithWrappers(<MockAdditionalGeneIDsOptionsScreen initialData={injectedState} />)
 
-    expect(queryAllByA11yState({ checked: true })).toHaveLength(2)
+    expect(screen.queryAllByA11yState({ checked: true })).toHaveLength(2)
 
-    fireEvent.press(getByText("Clear"))
+    fireEvent.press(screen.getByText("Clear"))
 
-    expect(queryAllByA11yState({ checked: true })).toHaveLength(0)
+    expect(screen.queryAllByA11yState({ checked: true })).toHaveLength(0)
   })
 })
diff --git a/src/app/Components/ArtworkFilter/Filters/ArtistIDsArtworksOptions.tests.tsx b/src/app/Components/ArtworkFilter/Filters/ArtistIDsArtworksOptions.tests.tsx
@@ -1,4 +1,4 @@
-import { fireEvent } from "@testing-library/react-native"
+import { fireEvent, screen } from "@testing-library/react-native"
 import { Aggregations, FilterParamName } from "app/Components/ArtworkFilter/ArtworkFilterHelpers"
 import {
   ArtworkFiltersState,
@@ -111,12 +111,13 @@ describe("Artist options screen", () => {
         sizeMetric: "cm",
       }
 
-      const { getAllByA11yState } = renderWithWrappers(
-        <MockArtistScreen initialData={injectedState} />
-      )
-      const selectedOptions = getAllByA11yState({ checked: true })
+      renderWithWrappers(<MockArtistScreen initialData={injectedState} />)
 
-      expect(selectedOptions[0]).toHaveTextContent("Artist 2")
+      const options = screen.getAllByTestId("multi-select-option-button")
+      const checkboxes = screen.getAllByTestId("multi-select-option-checkbox")
+
+      expect(options[2]).toHaveTextContent("Artist 2")
+      expect(checkboxes[2]).toHaveProp("selected", true)
     })
 
     it("allows multiple artist options to be selected", () => {
@@ -135,20 +136,20 @@ describe("Artist options screen", () => {
         sizeMetric: "cm",
       }
 
-      const { getByText, getAllByA11yState } = renderWithWrappers(
-        <MockArtistScreen initialData={injectedState} />
-      )
+      renderWithWrappers(<MockArtistScreen initialData={injectedState} />)
 
-      fireEvent.press(getByText("All Artists I Follow"))
-      fireEvent.press(getByText("Artist 1"))
-      fireEvent.press(getByText("Artist 2"))
+      const checkboxes = screen.getAllByTestId("multi-select-option-checkbox")
 
-      const selectedOptions = getAllByA11yState({ checked: true })
+      fireEvent.press(screen.getByText("All Artists I Follow"))
+      fireEvent.press(screen.getByText("Artist 1"))
+      fireEvent.press(screen.getByText("Artist 2"))
 
-      expect(selectedOptions).toHaveLength(3)
-      expect(selectedOptions[0]).toHaveTextContent("All Artists I Follow")
-      expect(selectedOptions[1]).toHaveTextContent("Artist 1")
-      expect(selectedOptions[2]).toHaveTextContent("Artist 2")
+      expect(checkboxes[0]).toHaveProp("selected", true)
+      expect(checkboxes[1]).toHaveProp("selected", true)
+      expect(checkboxes[2]).toHaveProp("selected", true)
+      expect(checkboxes[3]).toHaveProp("selected", false)
+      expect(checkboxes[4]).toHaveProp("selected", false)
+      expect(checkboxes[5]).toHaveProp("selected", false)
     })
 
     it("deselects artist option if it is already selected and then tapped again", () => {
@@ -173,17 +174,17 @@ describe("Artist options screen", () => {
         sizeMetric: "cm",
       }
 
-      const { queryByA11yState, getAllByA11yState, getByText } = renderWithWrappers(
-        <MockArtistScreen initialData={injectedState} />
-      )
+      renderWithWrappers(<MockArtistScreen initialData={injectedState} />)
+
+      const options = screen.getAllByTestId("multi-select-option-button")
+      const checkboxes = screen.getAllByTestId("multi-select-option-checkbox")
 
-      const selectedOptionsBeforeTapping = getAllByA11yState({ checked: true })
-      expect(selectedOptionsBeforeTapping).toHaveLength(1)
-      expect(selectedOptionsBeforeTapping[0]).toHaveTextContent("Artist 2")
+      expect(options[2]).toHaveTextContent("Artist 2")
+      expect(checkboxes[2]).toHaveProp("selected", true)
 
-      fireEvent.press(getByText("Artist 2"))
+      fireEvent.press(screen.getByText("Artist 2"))
 
-      expect(queryByA11yState({ checked: true })).toBeFalsy()
+      expect(checkboxes[2]).toHaveProp("selected", false)
     })
   })
 
@@ -204,9 +205,9 @@ describe("Artist options screen", () => {
         sizeMetric: "cm",
       }
 
-      const { queryByText } = renderWithWrappers(<MockArtistScreen initialData={injectedState} />)
+      renderWithWrappers(<MockArtistScreen initialData={injectedState} />)
 
-      expect(queryByText("All Artists I Follow")).toBeTruthy()
+      expect(screen.getByText("All Artists I Follow")).toBeOnTheScreen()
     })
 
     it("should be visible if counts has followedArtists ", () => {
@@ -225,9 +226,9 @@ describe("Artist options screen", () => {
         sizeMetric: "cm",
       }
 
-      const { queryByText } = renderWithWrappers(<MockArtistScreen initialData={injectedState} />)
+      renderWithWrappers(<MockArtistScreen initialData={injectedState} />)
 
-      expect(queryByText("All Artists I Follow")).toBeTruthy()
+      expect(screen.getByText("All Artists I Follow")).toBeOnTheScreen()
     })
 
     it("should be hidden if there are no followed artists in the aggregation", () => {
@@ -259,9 +260,9 @@ describe("Artist options screen", () => {
         sizeMetric: "cm",
       }
 
-      const { queryByText } = renderWithWrappers(<MockArtistScreen initialData={injectedState} />)
+      renderWithWrappers(<MockArtistScreen initialData={injectedState} />)
 
-      expect(queryByText("All Artists I Follow")).toBeFalsy()
+      expect(screen.queryByText("All Artists I Follow")).not.toBeOnTheScreen()
     })
   })
 })