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

- #348

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)/)',
+  ],
+});

jest.setup.js

@@ -6,6 +6,24 @@ import 'jest-plugin-context/setup';
 import 'given2/setup';
 
 jest.mock('@/utils/rehypePrism');
+jest.mock('next/dynamic', () => ({
+  __esModule: true,
+  default: (...props) => {
+    const dynamicModule = jest.requireActual('next/dynamic');
+    const dynamicActualComp = dynamicModule.default;
+    const RequiredComponent = dynamicActualComp(props[0]);
+
+    if (RequiredComponent.preload) {
+      RequiredComponent.preload();
+
+      return RequiredComponent;
+    }
+
+    RequiredComponent.render.preload();
+
+    return RequiredComponent;
+  },
+}));
 
 setLogger({
   log: console.log,

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,72 @@
     "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",
+    "@testing-library/react-hooks": "^8.0.0",
     "@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",
+    "react-test-renderer": "^18.1.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/Header.test.tsx

@@ -1,24 +1,34 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import ReactQueryWrapper from '@/test/ReactQueryWrapper';
+import useFetchAlertAlarms from '@/hooks/api/alarm/useFetchAlertAlarms';
+
+import FIXTURE_ALARM from '../../../fixtures/alarm';
 
 import Header from './Header';
 
+jest.mock('@/hooks/api/alarm/useFetchAlertAlarms');
+
 describe('Header', () => {
   const handleClick = jest.fn();
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (useFetchAlertAlarms as jest.Mock).mockImplementation(() => ({
+      data: [FIXTURE_ALARM],
+    }));
+  });
+
   const renderHeader = () => render((
-    <ReactQueryWrapper>
-      <Header
-        signOut={jest.fn()}
-        isScrollTop
-        user={given.user}
-        onClick={handleClick}
-        hasBackground
-        isLoading={given.isLoading}
-        hasOnlyLogo={given.hasOnlyLogo}
-      />
-    </ReactQueryWrapper>
+    <Header
+      signOut={jest.fn()}
+      isScrollTop
+      user={given.user}
+      onClick={handleClick}
+      hasBackground
+      isLoading={given.isLoading}
+      hasOnlyLogo={given.hasOnlyLogo}
+    />
   ));
 
   context('signup 페이지인 경우', () => {

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/detail/WriterStatusButtons.test.tsx

@@ -1,16 +1,19 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { useRouter } from 'next/router';
 
+import useFetchApplicants from '@/hooks/api/applicant/useFetchApplicants';
 import useRemoveGroup from '@/hooks/api/group/useRemoveGroup';
 import useRemoveGroupThumbnail from '@/hooks/api/storage/useRemoveGroupThumbnail';
 import InjectMockProviders from '@/test/InjectMockProviders';
 
+import FIXTURE_APPLICANT from '../../../fixtures/applicant';
 import FIXTURE_GROUP from '../../../fixtures/group';
 
 import WriterStatusButtons from './WriterStatusButtons';
 
 jest.mock('@/hooks/api/group/useRemoveGroup');
 jest.mock('@/hooks/api/storage/useRemoveGroupThumbnail');
+jest.mock('@/hooks/api/applicant/useFetchApplicants');
 jest.mock('next/router', () => ({
   useRouter: jest.fn(),
 }));
@@ -38,6 +41,10 @@ describe('WriterStatusButtons', () => {
     (useRemoveGroupThumbnail as jest.Mock).mockImplementation(() => ({
       mutate: removeGroupThumbnailMutate,
     }));
+
+    (useFetchApplicants as jest.Mock).mockImplementation(() => ({
+      data: [FIXTURE_APPLICANT],
+    }));
   });
 
   const renderWriterStatusButtons = (isCompleted = false) => render((

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(() => Math.random()),
+}));
+
 describe('TagsBar', () => {
   const handleClick = jest.fn();
 

src/components/myInfo/MyInfoLayout.test.tsx

@@ -1,16 +1,52 @@
 import { render } from '@testing-library/react';
 
+import useFetchAlertAlarms from '@/hooks/api/alarm/useFetchAlertAlarms';
+import useFetchUserProfile from '@/hooks/api/auth/useFetchUserProfile';
+import useSignOut from '@/hooks/api/auth/useSignOut';
+import useFetchUserAppliedGroups from '@/hooks/api/group/useFetchUserAppliedGroups';
+import useFetchUserRecruitedGroups from '@/hooks/api/group/useFetchUserRecruitedGroups';
 import InjectMockProviders from '@/test/InjectMockProviders';
 
+import FIXTURE_ALARM from '../../../fixtures/alarm';
+import FIXTURE_GROUP from '../../../fixtures/group';
+import FIXTURE_PROFILE from '../../../fixtures/profile';
+
 import getMyInfoLayout from './MyInfoLayout';
 
+jest.mock('@/hooks/api/auth/useFetchUserProfile');
+jest.mock('@/hooks/api/group/useFetchUserAppliedGroups');
+jest.mock('@/hooks/api/group/useFetchUserRecruitedGroups');
+jest.mock('@/hooks/api/alarm/useFetchAlertAlarms');
+jest.mock('@/hooks/api/auth/useSignOut');
 jest.mock('next/router', () => ({
   useRouter: jest.fn().mockImplementation(() => ({
     pathname: '/',
   })),
 }));
 
 describe('MyInfoLayout', () => {
+  beforeEach(() => {
+    (useFetchUserProfile as jest.Mock).mockImplementation(() => ({
+      data: FIXTURE_PROFILE,
+    }));
+
+    (useFetchUserAppliedGroups as jest.Mock).mockImplementation(() => ({
+      data: FIXTURE_GROUP,
+    }));
+
+    (useFetchUserRecruitedGroups as jest.Mock).mockImplementation(() => ({
+      data: FIXTURE_GROUP,
+    }));
+
+    (useSignOut as jest.Mock).mockImplementation(() => ({
+      mutate: jest.fn(),
+    }));
+
+    (useFetchAlertAlarms as jest.Mock).mockImplementation(() => ({
+      data: [FIXTURE_ALARM],
+    }));
+  });
+
   const GetLayout = getMyInfoLayout('setting');
   function MockComponent(): JSX.Element {
     return <>Test</>;

src/components/write/ThumbnailUpload.test.tsx

@@ -1,6 +1,5 @@
 import {
-  act,
-  fireEvent, render, screen, waitFor,
+  act, fireEvent, render, screen, waitFor,
 } from '@testing-library/react';
 
 import useFetchUserProfile from '@/hooks/api/auth/useFetchUserProfile';
@@ -81,9 +80,11 @@ describe('ThumbnailUpload', () => {
           });
         });
 
-        await waitFor(async () => expect(mutate).toBeCalledWith({
-          userUid: FIXTURE_PROFILE.uid, thumbnail: file,
-        }));
+        await waitFor(
+          async () => expect(mutate).toBeCalledWith({
+            userUid: FIXTURE_PROFILE.uid, thumbnail: file,
+          }),
+        );
       });
     });
   });
@@ -105,9 +106,11 @@ describe('ThumbnailUpload', () => {
           });
         });
 
-        await waitFor(async () => expect(mutate).toBeCalledWith({
-          userUid: FIXTURE_PROFILE.uid, thumbnail: file,
-        }));
+        await waitFor(
+          async () => expect(mutate).toBeCalledWith({
+            userUid: FIXTURE_PROFILE.uid, thumbnail: file,
+          }),
+        );
 
         act(() => {
           fireEvent.click(screen.getByTestId('close-icon'));