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

saseungmin · 2022-04-04T15:43:41Z

Update dependencies emotion, remirror, next, react, react-hook-form, react-query, testing-library, jest, cypress
https://nextjs.org/docs/advanced-features/react-18/overview
https://reactjs.org/blog/2022/03/29/react-v18.html
https://github.com/react-hook-form/react-hook-form/releases/tag/v7.29.0
https://github.com/tannerlinsley/react-query/releases/tag/v4.0.0-beta.1 (미적용)
https://github.com/testing-library/react-testing-library/releases/tag/v13.0.0

해결해야할 사항

React 18에서 remirror EmojiExtension error
After migration to React 18, EmojiExtension encounters an error. remirror/remirror#1580
react-testing-library/hook 아직 리액트 18 미지원

테스트에 act 사용 console error
- The current testing environment is not configured to support act(...) with React 18 & Jest testing-library/react-testing-library#1057
- bc5e8d6 (#349) 이 커밋에서 해결

next.js 12부터 컴파일러가 swc가 default => babel을 걷어내고 swc 적용하기 (선택)

- Update dependencies emotion, remirror, next, react, react-hook-form, react-query, testing-library, jest, cypress

vercel · 2022-04-04T15:43:45Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/jennie-harang/conners/6odppMS712BrTAuduMsU1FnKicr4
✅ Preview: https://conners-git-setting-issue-348-jennie-harang.vercel.app

codecov · 2022-04-04T15:50:02Z

Codecov Report

Merging #349 (bc5e8d6) into main (0f2e3a3) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##              main      #349   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          174       174           
  Lines         2914      2914           
  Branches       301       301           
=========================================
  Hits          2914      2914

Impacted Files	Coverage Δ
src/components/auth/SignUpForm.tsx	`100.00% <100.00%> (ø)`
src/components/common/SubHeader.tsx	`100.00% <100.00%> (ø)`
src/components/detail/ApplyFormModal.tsx	`100.00% <100.00%> (ø)`
src/containers/home/StatusBarContainer.tsx	`100.00% <100.00%> (ø)`
src/test/InjectTestingRecoilState.tsx	`100.00% <100.00%> (ø)`
src/test/ReactQueryWrapper.tsx	`100.00% <100.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0f2e3a3...bc5e8d6. Read the comment docs.

1. react-testing-library/hooks는 react 18미지원 => react-testing-library/react로 사용 - 그에 따라 react-testing-library/react-hooks는 삭제 2. 전체 dependencies update 3. React 18 마이그레이션 후 remirror 에러를 수정 4. jest 설정 변경

vercel · 2022-05-03T15:43:26Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
conners	✅ Ready (Inspect)	Visit Preview	May 4, 2022 at 4:37PM (UTC)

- 타입 지정

saseungmin · 2022-05-03T15:55:19Z

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',


https://testing-library.com/docs/dom-testing-library/setup/

saseungmin · 2022-05-03T15:56:24Z

jest.config.js

+  ...await createJestConfig(customJestConfig)(),
+  transformIgnorePatterns: [
+    'node_modules/(?!(@firebase|nanoid|@hookform)/)',
+  ],


node_modules ignore transform Patterns
vercel/next.js#36077

saseungmin · 2022-05-03T15:57:37Z

src/components/auth/SignUpForm.tsx

-import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
+import { yupResolver } from '@hookform/resolvers/yup';


버전업되면서 경로가 변경됨
https://github.com/react-hook-form/resolvers#yup

saseungmin · 2022-05-03T16:01:13Z

src/components/common/SubHeader.tsx

-import React, { ReactChild, ReactElement } from 'react';
+import React, { PropsWithChildren, ReactElement } from 'react';


ReactChild type은 react 18부터 deprecated

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions

[RFC] React 18 and types-only breaking changes DefinitelyTyped/DefinitelyTyped#46691

saseungmin · 2022-05-03T16:02:08Z

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

-      await waitFor(() => result.current.isSuccess);
-
-      expect(result.current.data).toEqual([]);
+      await waitFor(() => expect(result.current.data).toEqual([]));


https://testing-library.com/docs/dom-testing-library/api-async/#waitfor

- react-hooks console.error 수정 - react-test-renderer dependency 추가 (해당 버전에 맞는 peer dependency 사용)

- 컴포넌트 관련 테스트에서 react-query hooks로 인해 act console.error 발생 - react-query hooks를 jest mocking - dynamic import 전역 mocking 추가 - 추후 msw로 변경

saseungmin · 2022-05-04T16:44:51Z

jest.setup.js

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


https://stackoverflow.com/questions/46906948/how-to-unit-test-next-js-dynamic-components

saseungmin · 2022-05-04T16:50:26Z

package.json

    "jest-plugin-context": "^2.9.0",
    "lint-staged": "^12.1.2",
    "node-mocks-http": "^1.11.0",
+    "react-test-renderer": "^18.1.0",


@testing-library/react-hooks에 react-test-renderer peer dependency로 적용되어있음.
따라서 해당 버전에 따라서 @testing-library/react-hooks가 동작하는 방식이 다름. render.dom console.error가 발생했던 원인은 peer dependency의 react-test-renderer가 버전이 react 18이하였기때문.

https://react-hooks-testing-library.com/installation#peer-dependencies

https://react-query.tanstack.com/guides/testing#set-cachetime-to-infinity-with-jest

saseungmin · 2022-05-04T16:53:21Z

👉 해당 PR은 squash merge가 아니라 모든 commit 내용을 기록하기 위해서 기본 merge로 진행 👈

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

04ce4db

- Update dependencies emotion, remirror, next, react, react-hook-form, react-query, testing-library, jest, cypress

saseungmin added the 🛠 Setting Install Dependencies & Setting for project label Apr 4, 2022

auto-assign bot assigned saseungmin Apr 4, 2022

saseungmin linked an issue Apr 4, 2022 that may be closed by this pull request

React 18 마이그레이션 #348

Closed

4 tasks

saseungmin added 2 commits May 3, 2022 23:07

Merge branch 'main' into setting/issue-348

f92ac7c

vercel bot had a problem deploying to Preview May 3, 2022 15:45 Failure

[Fix] eslint ts error 수정

c3c7ed5

- 타입 지정

vercel bot deployed to Preview May 3, 2022 15:49 View deployment

saseungmin commented May 3, 2022

View reviewed changes

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

6bce4ec

- react-hooks console.error 수정 - react-test-renderer dependency 추가 (해당 버전에 맞는 peer dependency 사용)

vercel bot deployed to Preview May 4, 2022 15:04 View deployment

[Fix] 컴포넌트 테스트에서 act console.error 발생하는 이슈를 수정하라

bc5e8d6

- 컴포넌트 관련 테스트에서 react-query hooks로 인해 act console.error 발생 - react-query hooks를 jest mocking - dynamic import 전역 mocking 추가 - 추후 msw로 변경

vercel bot deployed to Preview May 4, 2022 16:37 View deployment

saseungmin added Bugfix/Function Fix to bug and isn't working Refactor Refactoring for code Testing about test, e2e test Improve/Function 기존 기능에 향상시킬 수 추가적인 기능 labels May 4, 2022

saseungmin commented May 4, 2022

View reviewed changes

saseungmin mentioned this pull request May 4, 2022

React 18 마이그레이션 #348

Closed

4 tasks

saseungmin merged commit d9dc017 into main May 4, 2022

saseungmin deleted the setting/issue-348 branch May 4, 2022 16:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

saseungmin commented Apr 4, 2022 •

edited

Loading

vercel bot commented Apr 4, 2022

codecov bot commented Apr 4, 2022 •

edited

Loading

vercel bot commented May 3, 2022 •

edited

Loading

saseungmin May 3, 2022

saseungmin May 3, 2022

saseungmin May 3, 2022

saseungmin May 3, 2022 •

edited

Loading

saseungmin May 3, 2022

saseungmin May 4, 2022

saseungmin May 4, 2022

saseungmin commented May 4, 2022

		import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
		import { yupResolver } from '@hookform/resolvers/yup';

		import React, { ReactChild, ReactElement } from 'react';
		import React, { PropsWithChildren, ReactElement } from 'react';

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

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

Conversation

saseungmin commented Apr 4, 2022 • edited Loading

해결해야할 사항

vercel bot commented Apr 4, 2022

codecov bot commented Apr 4, 2022 • edited Loading

Codecov Report

vercel bot commented May 3, 2022 • edited Loading

saseungmin May 3, 2022

Choose a reason for hiding this comment

saseungmin May 3, 2022

Choose a reason for hiding this comment

saseungmin May 3, 2022

Choose a reason for hiding this comment

saseungmin May 3, 2022 • edited Loading

Choose a reason for hiding this comment

saseungmin May 3, 2022

Choose a reason for hiding this comment

saseungmin May 4, 2022

Choose a reason for hiding this comment

saseungmin May 4, 2022

Choose a reason for hiding this comment

saseungmin commented May 4, 2022

saseungmin commented Apr 4, 2022 •

edited

Loading

codecov bot commented Apr 4, 2022 •

edited

Loading

vercel bot commented May 3, 2022 •

edited

Loading

saseungmin May 3, 2022 •

edited

Loading