[Fix] React Testing library react-hooks의 console.error가 나타나는 문제를 수정하라

- react-hooks console.error 수정 - react-test-renderer dependency 추가 (해당 버전에 맞는 peer dependency 사용)
mbti-nf-team · May 4, 2022 · 6bce4ec · 6bce4ec
1 parent c3c7ed5
commit 6bce4ec
Show file tree

Hide file tree

Showing 16 changed files with 149 additions and 71 deletions.
diff --git a/package.json b/package.json
@@ -88,6 +88,7 @@
     "@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.5.0",
     "@types/jest-plugin-context": "^2.9.4",
@@ -122,6 +123,7 @@
     "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.6.4"
   },

diff --git a/src/components/home/TagsBar.test.tsx b/src/components/home/TagsBar.test.tsx
@@ -7,7 +7,7 @@ import RecoilObserver from '@/test/RecoilObserver';
 import TagsBar from './TagsBar';
 
 jest.mock('nanoid', () => ({
-  nanoid: jest.fn().mockImplementation(() => '12345'),
+  nanoid: jest.fn().mockImplementation(() => Math.random()),
 }));
 
 describe('TagsBar', () => {

diff --git a/src/components/write/ThumbnailUpload.test.tsx b/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'));

diff --git a/src/hooks/api/alarm/useFetchAlarms.test.ts b/src/hooks/api/alarm/useFetchAlarms.test.ts
@@ -1,4 +1,4 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 
 import { getUserAlarm } from '@/services/api/alarm';
 import wrapper from '@/test/ReactQueryWrapper';
@@ -28,19 +28,23 @@ describe('useFetchAlarms', () => {
     given('alarms', () => null);
 
     it('빈 배열을 반환해야만 한다', async () => {
-      const { result } = useFetchAlarmsHook();
+      const { result, waitFor } = useFetchAlarmsHook();
 
-      await waitFor(() => expect(result.current.data).toEqual([]));
+      await waitFor(() => result.current.isSuccess);
+
+      expect(result.current.data).toEqual([]);
     });
   });
 
   context('useQuery반환값이 존재하는 경우', () => {
     given('alarms', () => [ALARM_FIXTURE]);
 
     it('alarms에 대한 정보를 반환해야만 한다', async () => {
-      const { result } = useFetchAlarmsHook();
+      const { result, waitFor } = useFetchAlarmsHook();
+
+      await waitFor(() => result.current.isSuccess);
 
-      await waitFor(() => expect(result.current.data).toEqual([ALARM_FIXTURE]));
+      expect(result.current.data).toEqual([ALARM_FIXTURE]);
     });
   });
 });
diff --git a/src/hooks/api/alarm/useFetchAlertAlarms.test.ts b/src/hooks/api/alarm/useFetchAlertAlarms.test.ts
@@ -1,4 +1,4 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 
 import { getUserAlertAlarm } from '@/services/api/alarm';
 import wrapper from '@/test/ReactQueryWrapper';
@@ -28,19 +28,23 @@ describe('useFetchAlertAlarms', () => {
     given('alarms', () => null);
 
     it('빈 배열을 반환해야만 한다', async () => {
-      const { result } = useFetchAlertAlarmsHook();
+      const { result, waitFor } = useFetchAlertAlarmsHook();
 
-      await waitFor(() => expect(result.current.data).toEqual([]));
+      await waitFor(() => result.current.isSuccess);
+
+      expect(result.current.data).toEqual([]);
     });
   });
 
   context('useQuery반환값이 존재하는 경우', () => {
     given('alarms', () => [ALARM_FIXTURE]);
 
     it('alarms에 대한 정보를 반환해야만 한다', async () => {
-      const { result } = useFetchAlertAlarmsHook();
+      const { result, waitFor } = useFetchAlertAlarmsHook();
+
+      await waitFor(() => result.current.isSuccess);
 
-      await waitFor(() => expect(result.current.data).toEqual([ALARM_FIXTURE]));
+      expect(result.current.data).toEqual([ALARM_FIXTURE]);
     });
   });
 });
diff --git a/src/hooks/api/applicant/useFetchApplicants.test.ts b/src/hooks/api/applicant/useFetchApplicants.test.ts
@@ -1,7 +1,7 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 
 import { getApplicants } from '@/services/api/applicants';
-import wrapper from '@/test/InjectMockProviders';
+import wrapper from '@/test/ReactQueryWrapper';
 
 import FIXTURE_APPLICANT from '../../../../fixtures/applicant';
 
@@ -17,31 +17,35 @@ jest.mock('next/router', () => ({
 }));
 
 describe('useFetchApplicants', () => {
-  const useFetchApplicantsHook = () => renderHook(() => useFetchApplicants(), { wrapper });
-
   beforeEach(() => {
     jest.clearAllMocks();
 
     (getApplicants as jest.Mock).mockImplementation(() => (given.applicants));
   });
 
+  const useFetchApplicantsHook = () => renderHook(() => useFetchApplicants(), { wrapper });
+
   context('useQuery반환값이 존재하지 않는 경우', () => {
     given('applicants', () => null);
 
     it('빈 배열을 반환해야만 한다', async () => {
-      const { result } = useFetchApplicantsHook();
+      const { result, waitFor } = useFetchApplicantsHook();
+
+      await waitFor(() => result.current.isSuccess);
 
-      await waitFor(() => expect(result.current.data).toEqual([]));
+      expect(result.current.data).toEqual([]);
     });
   });
 
   context('useQuery반환값이 존재하는 경우', () => {
     given('applicants', () => [FIXTURE_APPLICANT]);
 
     it('applicants에 대한 정보를 반환해야만 한다', async () => {
-      const { result } = useFetchApplicantsHook();
+      const { result, waitFor } = useFetchApplicantsHook();
+
+      await waitFor(() => result.current.isSuccess);
 
-      await waitFor(() => expect(result.current.data).toEqual([FIXTURE_APPLICANT]));
+      expect(result.current.data).toEqual([FIXTURE_APPLICANT]);
     });
   });
 });
diff --git a/src/hooks/api/auth/useFetchUserProfile.test.ts b/src/hooks/api/auth/useFetchUserProfile.test.ts
@@ -1,4 +1,4 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 
 import { getUserProfile } from '@/services/api/auth';
 import wrapper from '@/test/ReactQueryWrapper';
@@ -38,9 +38,11 @@ describe('useFetchUserProfile', () => {
     given('isLoading', () => false);
 
     it('user에 대한 profile 정보를 반환해야만 한다', async () => {
-      const { result } = useFetchUserProfileHook();
+      const { result, waitFor } = useFetchUserProfileHook();
 
-      await waitFor(() => expect(result.current.data).toEqual(FIXTURE_PROFILE));
+      await waitFor(() => result.current.isSuccess);
+
+      expect(result.current.data).toEqual(FIXTURE_PROFILE);
     });
   });
 
@@ -49,9 +51,11 @@ describe('useFetchUserProfile', () => {
     given('isLoading', () => true);
 
     it('user에 대한 profile 정보를 반환해야만 한다', async () => {
-      const { result } = useFetchUserProfileHook();
+      const { result, waitFor } = useFetchUserProfileHook();
+
+      await waitFor(() => result.current.isSuccess);
 
-      await waitFor(() => expect(result.current.data).toEqual(null));
+      expect(result.current.data).toEqual(null);
     });
   });
 });
diff --git a/src/hooks/api/auth/useGetUser.test.ts b/src/hooks/api/auth/useGetUser.test.ts
@@ -1,5 +1,5 @@
 import { useAuthUser } from '@react-query-firebase/auth';
-import { renderHook, waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 
 import wrapper from '@/test/ReactQueryWrapper';
 
@@ -24,19 +24,23 @@ describe('useGetUser', () => {
     given('user', () => null);
 
     it('user에 대한 정보를 반환해야만 한다', async () => {
-      const { result } = useGetUserHook();
+      const { result, waitFor } = useGetUserHook();
 
-      await waitFor(() => expect(result.current.data).toEqual(null));
+      await waitFor(() => result.current.isSuccess);
+
+      expect(result.current.data).toEqual(null);
     });
   });
 
   context('user.data가 존재하는 경우', () => {
     given('user', () => FIXTURE_PROFILE);
 
     it('user에 대한 정보를 반환해야만 한다', async () => {
-      const { result } = useGetUserHook();
+      const { result, waitFor } = useGetUserHook();
+
+      await waitFor(() => result.current.isSuccess);
 
-      await waitFor(() => expect(result.current.data).toEqual(FIXTURE_PROFILE));
+      expect(result.current.data).toEqual(FIXTURE_PROFILE);
     });
   });
 });
diff --git a/src/hooks/api/comment/useFetchComments.test.ts b/src/hooks/api/comment/useFetchComments.test.ts
@@ -1,4 +1,4 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 
 import { getGroupComments } from '@/services/api/comment';
 import wrapper from '@/test/InjectMockProviders';
@@ -29,19 +29,23 @@ describe('useFetchComments', () => {
     given('comments', () => null);
 
     it('빈 배열을 반환해야만 한다', async () => {
-      const { result } = useFetchCommentsHook();
+      const { result, waitFor } = useFetchCommentsHook();
 
-      await waitFor(() => expect(result.current.data).toEqual([]));
+      await waitFor(() => result.current.isSuccess);
+
+      expect(result.current.data).toEqual([]);
     });
   });
 
   context('useQuery반환값이 존재하는 경우', () => {
     given('comments', () => [FIXTURE_COMMENT]);
 
     it('comments에 대한 정보를 반환해야만 한다', async () => {
-      const { result } = useFetchCommentsHook();
+      const { result, waitFor } = useFetchCommentsHook();
+
+      await waitFor(() => result.current.isSuccess);
 
-      await waitFor(() => expect(result.current.data).toEqual([FIXTURE_COMMENT]));
+      expect(result.current.data).toEqual([FIXTURE_COMMENT]);
     });
   });
 });
diff --git a/src/hooks/api/group/useFetchGroup.test.ts b/src/hooks/api/group/useFetchGroup.test.ts
@@ -1,4 +1,4 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 
 import { getGroupDetail } from '@/services/api/group';
 import wrapper from '@/test/ReactQueryWrapper';
@@ -26,9 +26,11 @@ describe('useFetchGroup', () => {
   });
 
   it('group에 대한 정보를 반환해야만 한다', async () => {
-    const { result } = useFetchGroupHook();
+    const { result, waitFor } = useFetchGroupHook();
+
+    await waitFor(() => result.current.isSuccess);
 
     expect(getGroupDetail).toBeCalledWith('groupId');
-    await waitFor(() => expect(result.current.data).toEqual(FIXTURE_GROUP));
+    expect(result.current.data).toEqual(FIXTURE_GROUP);
   });
 });
diff --git a/src/hooks/api/group/useFetchGroups.test.ts b/src/hooks/api/group/useFetchGroups.test.ts
@@ -1,4 +1,4 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 
 import { getFilteredGroups } from '@/services/api/group';
 import wrapper from '@/test/InjectMockProviders';
@@ -22,19 +22,23 @@ describe('useFetchGroups', () => {
     given('groups', () => null);
 
     it('빈 배열을 반환해야만 한다', async () => {
-      const { result } = useFetchGroupsHook();
+      const { result, waitFor } = useFetchGroupsHook();
 
-      await waitFor(() => expect(result.current.data).toEqual([]));
+      await waitFor(() => result.current.isSuccess);
+
+      expect(result.current.data).toEqual([]);
     });
   });
 
   context('useQuery반환값이 존재하는 경우', () => {
     given('groups', () => [FIXTURE_GROUP]);
 
     it('groups에 대한 정보를 반환해야만 한다', async () => {
-      const { result } = useFetchGroupsHook();
+      const { result, waitFor } = useFetchGroupsHook();
+
+      await waitFor(() => result.current.isSuccess);
 
-      await waitFor(() => expect(result.current.data).toEqual([FIXTURE_GROUP]));
+      expect(result.current.data).toEqual([FIXTURE_GROUP]);
     });
   });
 });
diff --git a/src/hooks/api/group/useFetchUserAppliedGroups.test.ts b/src/hooks/api/group/useFetchUserAppliedGroups.test.ts
@@ -1,4 +1,4 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 
 import { getUserAppliedGroups } from '@/services/api/applicants';
 import wrapper from '@/test/ReactQueryWrapper';
@@ -24,19 +24,22 @@ describe('useFetchUserAppliedGroups', () => {
     given('groups', () => null);
 
     it('빈 배열을 반환해야만 한다', async () => {
-      const { result } = useFetchUserAppliedGroupsHook();
+      const { result, waitFor } = useFetchUserAppliedGroupsHook();
 
-      await waitFor(() => expect(result.current.data).toEqual([]));
+      await waitFor(() => result.current.isSuccess);
+
+      expect(result.current.data).toEqual([]);
     });
   });
 
   context('useQuery 반환값이 존재하는 경우', () => {
     given('groups', () => [FIXTURE_GROUP]);
 
     it('groups에 대한 정보를 반환해야만 한다', async () => {
-      const { result } = useFetchUserAppliedGroupsHook();
+      const { result, waitFor } = useFetchUserAppliedGroupsHook();
+      await waitFor(() => result.current.isSuccess);
 
-      await waitFor(() => expect(result.current.data).toEqual([FIXTURE_GROUP]));
+      expect(result.current.data).toEqual([FIXTURE_GROUP]);
     });
   });
 });