[UGN-353] Fix tests

Author: masiulis

package-lock.json

@@ -54,7 +54,7 @@
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "chakra-react-select": "^4.6.0",
-    "chakra-ui-steps": "^2.1.0",
+    "chakra-ui-steps": "2.0.4",
     "framer-motion": "^7.0.0",
     "js-levenshtein": "1.1.6",
     "lodash": "4.17.21",
@@ -70,7 +70,7 @@
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.21.5",
     "@emotion/jest": "11.11.0",
-    "@jest/types": "29.5.0",
+    "@jest/types": "27.5.1",
     "@storybook/addon-essentials": "7.0.14",
     "@storybook/addon-interactions": "7.0.14",
     "@storybook/addon-links": "7.0.14",
@@ -83,12 +83,12 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
-    "@types/jest": "29.5.1",
+    "@types/jest": "27.4.1",
     "@types/js-levenshtein": "1.1.1",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
     "@types/styled-system": "5.1.16",
-    "@types/uuid": "^9.0.1",
+    "@types/uuid": "9.0.1",
     "@typescript-eslint/eslint-plugin": "5.59.7",
     "@typescript-eslint/parser": "5.59.7",
     "babel-loader": "9.1.2",
@@ -97,22 +97,25 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "jest": "29.5.0",
-    "jest-watch-typeahead": "2.2.2",
+    "jest": "27.5.1",
+    "jest-watch-typeahead": "1.0.0",
     "lint-staged": "13.2.2",
     "prettier": "2.8.8",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-select-event": "5.5.1",
-    "rollup": "3.23.0",
-    "rollup-plugin-typescript2": "0.34.1",
+    "rollup": "2.70.1",
+    "rollup-plugin-typescript2": "0.31.2",
     "storybook": "7.0.14",
     "ts-essentials": "9.3.2",
-    "ts-jest": "29.1.0",
+    "ts-jest": "27.1.4",
     "ttypescript": "1.5.15",
-    "typescript": "5.0.4",
-    "typescript-transform-paths": "^3.4.6"
+    "typescript": "4.9.5",
+    "typescript-transform-paths": "3.4.6"
+  },
+  "overrides": {
+    "nwsapi": "2.2.2"
   },
   "lint-staged": {
     "*.{ts,tsx}": "eslint",
@@ -131,38 +134,33 @@
       "ts",
       "tsx",
       "js",
-      "jsx"
+      "jsx",
+      "mjs"
     ],
     "transform": {
-      "^.+\\.(ts|tsx)?$": "ts-jest/dist"
+      "^.+\\.(ts|tsx)?$": "ts-jest/dist",
+      "^.+\\.mjs$": "ts-jest/dist"
     },
     "moduleNameMapper": {
       "~/(.*)": "<rootDir>/src/$1"
     },
     "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
     ],
     "setupFiles": [
       "./src/tests/setup.ts"
     ],
     "setupFilesAfterEnv": [
       "@testing-library/jest-dom/extend-expect"
     ],
+    "globals": {
+      "ts-jest": {
+        "tsconfig": "tsconfig.json"
+      }
+    },
     "watchPlugins": [
       "jest-watch-typeahead/filename",
       "jest-watch-typeahead/testname"
-    ],
-    "browserslist": {
-      "production": [
-        ">0.2%",
-        "not dead",
-        "not op_mini all"
-      ],
-      "development": [
-        ">0.2%",
-        "not dead",
-        "not op_mini all"
-      ]
-    }
+    ]
   }
 }

package.json

@@ -20,7 +20,6 @@ type MatchIconProps = {
 export const MatchIcon = (props: MatchIconProps) => {
   const style = useStyleConfig("MatchIcon", props)
 
-  console.log(props.isChecked)
   return (
     <chakra.div
       __css={style}

src/steps/MatchColumnsStep/components/MatchIcon.tsx

@@ -582,7 +582,9 @@ describe("Match Columns general tests", () => {
       container: document.getElementById(SELECT_DROPDOWN_ID)!,
     })
 
-    expect(screen.queryByText(translations.matchColumnsStep.duplicateColumnWarningDescription)).toBeInTheDocument()
+    const toasts = await screen.queryAllByText(translations.matchColumnsStep.duplicateColumnWarningDescription)
+
+    expect(toasts?.[0]).toBeInTheDocument()
   })
 
   test("matchColumnsStepHook should be called after columns are matched", async () => {
@@ -676,7 +678,7 @@ describe("Match Columns general tests", () => {
     const continueButton = screen.getByText(CONTINUE_BUTTON)
     await userEvent.click(continueButton)
 
-    const errorToast = await screen.findByText(ERROR_MESSAGE, undefined, { timeout: 5000 })
-    expect(errorToast).toBeInTheDocument()
+    const errorToast = await screen.findAllByText(ERROR_MESSAGE, undefined, { timeout: 5000 })
+    expect(errorToast?.[0]).toBeInTheDocument()
   })
 })

src/steps/MatchColumnsStep/tests/MatchColumnsStep.test.tsx

@@ -132,11 +132,9 @@ describe("Select header step tests", () => {
     )
     const continueButton = screen.getByText(CONTINUE_BUTTON)
     await userEvent.click(continueButton)
-    const errorToast = await screen.getByText(ERROR_MESSAGE)
 
-    await waitFor(() => {
-      expect(errorToast).toBeInTheDocument()
-    })
+    const errorToast = await screen.findAllByText(ERROR_MESSAGE, undefined, { timeout: 5000 })
+    expect(errorToast?.[0]).toBeInTheDocument()
   })
 
   test("dateFormat property should NOT be applied to dates read from csv files IF parseRaw=true", async () => {

src/steps/SelectHeaderStep/tests/SelectHeaderStep.test.tsx

@@ -113,6 +113,6 @@ test("Should show error toast if error is thrown in uploadStepHook", async () =>
 
   await userEvent.click(nextButton)
 
-  const errorToast = await screen.findByText(ERROR_MESSAGE, undefined, { timeout: 5000 })
-  expect(errorToast).toBeInTheDocument()
+  const errorToast = await screen.findAllByText(ERROR_MESSAGE, undefined, { timeout: 5000 })
+  expect(errorToast?.[0]).toBeInTheDocument()
 })

src/steps/SelectSheetStep/tests/SelectSheetStep.test.tsx

@@ -7,7 +7,7 @@ import { Providers } from "../../../components/Providers"
 import { ModalWrapper } from "../../../components/ModalWrapper"
 
 const MUTATED_RAW_DATA = "Bye"
-const ERROR_MESSAGE = "Something happened"
+const ERROR_MESSAGE = "Something happened while uploading"
 
 test("Upload a file", async () => {
   const file = new File(["Hello, Hello, Hello, Hello"], "test.csv", { type: "text/csv" })
@@ -81,6 +81,6 @@ test("Should show error toast if error is thrown in uploadStepHook", async () =>
     target: { files: [file] },
   })
 
-  const errorToast = await screen.findByText(ERROR_MESSAGE, undefined, { timeout: 5000 })
-  expect(errorToast).toBeInTheDocument()
+  const errorToast = await screen.findAllByText(ERROR_MESSAGE, undefined, { timeout: 5000 })
+  expect(errorToast?.[0]).toBeInTheDocument()
 })

src/steps/UploadStep/tests/UploadStep.test.tsx

@@ -22,7 +22,16 @@ export const Basic = () => {
       <Link href="./exampleFile.csv" border="2px solid #718096" p="8px" borderRadius="8px" download="exampleCSV">
         Download example file
       </Link>
-      <ReactSpreadsheetImport {...mockRsiValues} isOpen={isOpen} onClose={onClose} onSubmit={setData} />
+      <ReactSpreadsheetImport
+        {...mockRsiValues}
+        isOpen={isOpen}
+        onClose={onClose}
+        onSubmit={setData}
+        uploadStepHook={async () => {
+          throw new Error("Hello")
+          return undefined as any
+        }}
+      />
       {!!data && (
         <Box pt={64} display="flex" gap="8px" flexDirection="column">
           <b>Returned data (showing first 100 rows):</b>