[Setting] React 18로 마이그레이션하라

jest.config.js

@@ -22,7 +22,13 @@ const customJestConfig = {
   coveragePathIgnorePatterns: [
     '<rootDir>/src/components/detail/RecruitCompleteCanvasConfetti.tsx',
   ],
-  testEnvironment: 'jsdom',
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
 };
 
-module.exports = createJestConfig(customJestConfig);
+module.exports = async () => ({
+  ...await createJestConfig(customJestConfig)(),
+  transformIgnorePatterns: [
+    'node_modules/(?!(@firebase|nanoid|@hookform)/)',
+  ],
+});

package.json

@@ -41,9 +41,9 @@
     ]
   },
   "dependencies": {
-    "@emotion/react": "^11.7.0",
-    "@emotion/styled": "^11.6.0",
-    "@hookform/resolvers": "^2.8.3",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@hookform/resolvers": "^2.8.8",
     "@react-query-firebase/auth": "^0.3.4",
     "@remirror/pm": "^1.0.16",
     "@remirror/react": "^1.0.35",
@@ -60,73 +60,70 @@
     "nextjs-progressbar": "^0.0.14",
     "nookies": "^2.5.2",
     "ramda": "^0.27.1",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "react-canvas-confetti": "^1.3.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.1.0",
     "react-feather": "^2.0.9",
-    "react-hook-form": "^7.20.4",
+    "react-hook-form": "^7.30.0",
     "react-images-uploading": "^3.1.3",
-    "react-query": "^3.34.12",
+    "react-query": "^3.38.1",
     "react-responsive": "^9.0.0-beta.6",
-    "react-select": "^5.2.2",
-    "react-toastify": "^8.1.0",
+    "react-select": "^5.3.1",
+    "react-toastify": "^8.2.0",
     "react-toggle": "^4.1.2",
-    "react-use": "^17.3.1",
-    "recoil": "^0.6.1",
-    "refractor": "^4.5.0",
+    "react-use": "^17.3.2",
+    "recoil": "^0.7.2",
+    "refractor": "^4.6.0",
     "rehype-parse": "^8.0.4",
     "rehype-stringify": "^9.0.3",
     "remirror": "^1.0.77",
     "sanitize-html": "^2.7.0",
     "svgmoji": "^3.2.0",
-    "unified": "^10.1.1",
+    "unified": "^10.1.2",
     "unist-util-visit": "^4.1.0",
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@babel/runtime": "^7.16.3",
-    "@emotion/babel-plugin": "^11.3.0",
     "@emotion/eslint-plugin": "^11.7.0",
-    "@svgr/webpack": "^6.1.2",
-    "@testing-library/dom": "^8.11.1",
-    "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@svgr/webpack": "^6.2.1",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.1.1",
     "@types/facepaint": "^1.2.2",
-    "@types/jest": "^27.0.2",
-    "@types/jest-plugin-context": "^2",
-    "@types/node": "^16.11.7",
+    "@types/jest": "^27.5.0",
+    "@types/jest-plugin-context": "^2.9.4",
+    "@types/node": "^17.0.31",
     "@types/ramda": "^0.27.62",
-    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
     "@types/react-toggle": "^4.0.3",
     "@types/refractor": "^3.0.2",
     "@types/sanitize-html": "^2.6.2",
-    "@types/testing-library__jest-dom": "^5",
+    "@types/testing-library__jest-dom": "^5.14.3",
     "@typescript-eslint/eslint-plugin": "^5.3.1",
     "@typescript-eslint/parser": "^5.3.1",
-    "cypress": "^9.0.0",
-    "eslint": "^8.2.0",
-    "eslint-config-airbnb": "^19.0.0",
-    "eslint-import-resolver-typescript": "^2.5.0",
+    "cypress": "^9.5.3",
+    "eslint": "^8.14.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-import-resolver-typescript": "^2.7.1",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jest": "^25.2.4",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.1.5",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.27.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-testing-library": "^5.0.0",
+    "eslint-plugin-testing-library": "^5.3.1",
     "eslint-plugin-unused-imports": "^2.0.0",
     "given2": "^2.1.7",
     "husky": "^7.0.4",
-    "jest": "^27.3.1",
+    "jest": "^28.0.3",
+    "jest-environment-jsdom": "^28.0.2",
     "jest-plugin-context": "^2.9.0",
     "lint-staged": "^12.1.2",
     "node-mocks-http": "^1.11.0",
     "start-server-and-test": "^1.14.0",
-    "typescript": "^4.4.4"
+    "typescript": "^4.6.4"
   },
   "browserslist": [
     "since 2017"

src/components/auth/SignUpForm.tsx

@@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form';
 import { useEffectOnce, useLocalStorage } from 'react-use';
 
 import styled from '@emotion/styled';
-import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
+import { yupResolver } from '@hookform/resolvers/yup';
 import { User } from 'firebase/auth';
 import * as yup from 'yup';
 

src/components/common/SubHeader.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import React, { ReactChild, ReactElement } from 'react';
+import React, { PropsWithChildren, ReactElement } from 'react';
 import { ChevronLeft } from 'react-feather';
 
 import styled from '@emotion/styled';
@@ -11,11 +11,10 @@ import zIndexes from '@/styles/zIndexes';
 
 interface Props {
   previousText: string;
-  children: ReactChild;
   goBack: () => void;
 }
 
-function SubHeader({ goBack, previousText, children }: Props): ReactElement {
+function SubHeader({ goBack, previousText, children }: PropsWithChildren<Props>): ReactElement {
   return (
     <>
       <HeaderBlock>

src/components/detail/ApplyFormModal.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react';
 import { useForm } from 'react-hook-form';
 
 import styled from '@emotion/styled';
-import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
+import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
 
 import FormModal from '@/components/common/FormModal';

src/components/detail/RecruitCompleteCanvasConfetti.tsx

@@ -22,11 +22,11 @@ function RecruitCompleteCanvasConfetti(): ReactElement {
   const refAnimationInstance = useRef<any>(null);
   const isVisible = useRecoilValue(recruitCompleteModalVisibleState);
 
-  const getInstance = useCallback((instance) => {
+  const getInstance = useCallback((instance: any) => {
     refAnimationInstance.current = instance;
   }, []);
 
-  const makeShot = useCallback((particleRatio, opts) => {
+  const makeShot = useCallback((particleRatio: any, opts: any) => {
     if (refAnimationInstance.current) {
       refAnimationInstance.current({
         ...opts,

src/components/home/TagsBar.test.tsx

@@ -6,6 +6,10 @@ import RecoilObserver from '@/test/RecoilObserver';
 
 import TagsBar from './TagsBar';
 
+jest.mock('nanoid', () => ({
+  nanoid: jest.fn().mockImplementation(() => '12345'),
+}));
+
 describe('TagsBar', () => {
   const handleClick = jest.fn();
 

src/hooks/api/alarm/useFetchAlarms.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 
 import { getUserAlarm } from '@/services/api/alarm';
 import wrapper from '@/test/ReactQueryWrapper';
@@ -28,23 +28,19 @@ describe('useFetchAlarms', () => {
     given('alarms', () => null);
 
     it('빈 배열을 반환해야만 한다', async () => {
-      const { result, waitFor } = useFetchAlarmsHook();
+      const { result } = useFetchAlarmsHook();
 
-      await waitFor(() => result.current.isSuccess);
-
-      expect(result.current.data).toEqual([]);
+      await waitFor(() => expect(result.current.data).toEqual([]));
     });
   });
 
   context('useQuery반환값이 존재하는 경우', () => {
     given('alarms', () => [ALARM_FIXTURE]);
 
     it('alarms에 대한 정보를 반환해야만 한다', async () => {
-      const { result, waitFor } = useFetchAlarmsHook();
-
-      await waitFor(() => result.current.isSuccess);
+      const { result } = useFetchAlarmsHook();
 
-      expect(result.current.data).toEqual([ALARM_FIXTURE]);
+      await waitFor(() => expect(result.current.data).toEqual([ALARM_FIXTURE]));
     });
   });
 });

src/hooks/api/alarm/useFetchAlertAlarms.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 
 import { getUserAlertAlarm } from '@/services/api/alarm';
 import wrapper from '@/test/ReactQueryWrapper';
@@ -28,23 +28,19 @@ describe('useFetchAlertAlarms', () => {
     given('alarms', () => null);
 
     it('빈 배열을 반환해야만 한다', async () => {
-      const { result, waitFor } = useFetchAlertAlarmsHook();
+      const { result } = useFetchAlertAlarmsHook();
 
-      await waitFor(() => result.current.isSuccess);
-
-      expect(result.current.data).toEqual([]);
+      await waitFor(() => expect(result.current.data).toEqual([]));
     });
   });
 
   context('useQuery반환값이 존재하는 경우', () => {
     given('alarms', () => [ALARM_FIXTURE]);
 
     it('alarms에 대한 정보를 반환해야만 한다', async () => {
-      const { result, waitFor } = useFetchAlertAlarmsHook();
-
-      await waitFor(() => result.current.isSuccess);
+      const { result } = useFetchAlertAlarmsHook();
 
-      expect(result.current.data).toEqual([ALARM_FIXTURE]);
+      await waitFor(() => expect(result.current.data).toEqual([ALARM_FIXTURE]));
     });
   });
 });

src/hooks/api/alarm/useUpdateAlarmViewed.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 
 import { patchAlarmViewed } from '@/services/api/alarm';
 import wrapper from '@/test/ReactQueryWrapper';

src/hooks/api/applicant/useApplyGroup.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 
 import { postAddAlarm } from '@/services/api/alarm';
 import { postAddApplicant } from '@/services/api/applicants';

src/hooks/api/applicant/useCancelApply.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 
 import { deleteApplicant } from '@/services/api/applicants';
 import wrapper from '@/test/ReactQueryWrapper';

src/hooks/api/applicant/useFetchApplicants.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 
 import { getApplicants } from '@/services/api/applicants';
 import wrapper from '@/test/InjectMockProviders';
@@ -29,23 +29,19 @@ describe('useFetchApplicants', () => {
     given('applicants', () => null);
 
     it('빈 배열을 반환해야만 한다', async () => {
-      const { result, waitFor } = useFetchApplicantsHook();
+      const { result } = useFetchApplicantsHook();
 
-      await waitFor(() => !!result.current.data);
-
-      expect(result.current.data).toEqual([]);
+      await waitFor(() => expect(result.current.data).toEqual([]));
     });
   });
 
   context('useQuery반환값이 존재하는 경우', () => {
     given('applicants', () => [FIXTURE_APPLICANT]);
 
     it('applicants에 대한 정보를 반환해야만 한다', async () => {
-      const { result, waitFor } = useFetchApplicantsHook();
-
-      await waitFor(() => !!result.current.data);
+      const { result } = useFetchApplicantsHook();
 
-      expect(result.current.data).toEqual([FIXTURE_APPLICANT]);
+      await waitFor(() => expect(result.current.data).toEqual([FIXTURE_APPLICANT]));
     });
   });
 });

src/hooks/api/applicant/useUpdateApplicant.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 
 import { putApplicant } from '@/services/api/applicants';
 import wrapper from '@/test/ReactQueryWrapper';

src/hooks/api/auth/useAccountWithdrawal.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import { useRouter } from 'next/router';
 
 import { deleteMember } from '@/services/api/auth';

src/hooks/api/auth/useAuthRedirectResult.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 import { useRouter } from 'next/router';
 
 import { getAuthRedirectResult } from '@/services/api/auth';
@@ -39,12 +39,10 @@ describe('useAuthRedirectResult', () => {
     given('profile', () => null);
 
     it('"/signup"과 함께 router.push가 호출되어야만 한다', async () => {
-      const { result, waitFor } = useAuthRedirectResultHook();
-
-      await waitFor(() => result.current.isSuccess);
+      const { result } = useAuthRedirectResultHook();
 
+      await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
       expect(getAuthRedirectResult).toBeCalled();
-      expect(result.current.isSuccess).toBeTruthy();
       expect(mockPush).toBeCalledWith('/signup');
     });
   });
@@ -53,11 +51,9 @@ describe('useAuthRedirectResult', () => {
     given('profile', () => FIXTURE_PROFILE);
 
     it('router.push가 호출되지 않아야만 한다', async () => {
-      const { result, waitFor } = useAuthRedirectResultHook();
-
-      await waitFor(() => result.current.isSuccess);
+      const { result } = useAuthRedirectResultHook();
 
-      expect(result.current.isSuccess).toBeTruthy();
+      await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
       expect(mockPush).not.toBeCalled();
     });
   });

src/hooks/api/auth/useCheckSignUp.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 import { useRouter } from 'next/router';
 
 import { postSignOut } from '@/services/api/auth';
@@ -32,12 +32,10 @@ describe('useCheckSignUp', () => {
     given('pathname', () => '/');
 
     it('postSignOut이 호출되어야만 한다', async () => {
-      const { result, waitFor } = useCheckSignUpHook();
-
-      await waitFor(() => result.current.isSuccess);
+      const { result } = useCheckSignUpHook();
 
+      await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
       expect(postSignOut).toBeCalled();
-      expect(result.current.isSuccess).toBeTruthy();
       expect(removeItem).toBeCalledWith('isSignUp');
     });
   });