Merge pull request #10 from mebuki-inc/update/react-next

Upgrade react/next version

package.json

@@ -19,48 +19,52 @@
   "dependencies": {
     "axios": "^0.27.2",
     "firebase": "^9.8.1",
-    "next": "12.1.6",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "next": "^13.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.5",
-    "@babel/preset-env": "^7.18.2",
-    "@storybook/addon-actions": "^6.5.8",
-    "@storybook/addon-essentials": "^6.5.8",
-    "@storybook/addon-links": "^6.5.8",
-    "@storybook/addon-storyshots": "^6.5.8",
-    "@storybook/builder-webpack5": "^6.5.8",
-    "@storybook/manager-webpack5": "^6.5.8",
-    "@storybook/react": "^6.5.8",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@types/node": "17.0.31",
-    "@types/react": "18.0.8",
-    "@types/react-dom": "18.0.3",
-    "babel-jest": "^28.1.1",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/addon-storyshots": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/react": "^6.5.13",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "babel-jest": "^29.3.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "css-loader": "^6.7.1",
     "eslint": "8.14.0",
-    "eslint-config-next": "12.1.6",
+    "eslint-config-next": "^13.0.3",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "firebase-tools": "^10.8.0",
     "husky": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.1.0",
-    "jest-environment-jsdom": "^28.1.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^12.4.1",
     "nock": "^13.2.7",
     "prettier": "^2.6.2",
     "sass": "^1.52.3",
     "sass-loader": "^13.0.0",
-    "storybook-addon-next-router": "^4.0.0",
+    "next-router-mock": "^0.8.0",
+    "storybook-addon-next-router": "^4.0.1",
     "style-loader": "^3.3.1",
-    "ts-jest": "^28.0.5",
-    "typescript": "4.6.4",
-    "webpack": "5.68.0"
+    "ts-jest": "^29.0.3",
+    "typescript": "^4.9.3",
+    "webpack": "^5.75.0"
+  },
+  "resolutions": {
+    "react-test-renderer": "18.2.0"
   },
   "lint-staged": {
     "src/**/*.{ts,tsx}": [

src/hooks/tests/useCSR.test.ts

@@ -1,12 +1,11 @@
-import Router, { useRouter } from 'next/router'
 import { renderHook, act, RenderResult } from '@testing-library/react-hooks'
-
+import mockRouter from 'next-router-mock'
 import { useCSR } from '../useCSR'
 
-jest.mock('next/router')
+jest.mock('next/router', () => require('next-router-mock'))
 
-const mockedUseRouter = jest.mocked(useRouter)
-const mockedRouter = jest.mocked(Router)
+const mockedUseRouter = jest.spyOn(require('next/router'), 'useRouter')
+const mockedReplace = jest.spyOn(mockRouter, 'replace')
 
 let result: RenderResult<boolean> | undefined
 
@@ -22,13 +21,13 @@ describe('useCSR', () => {
       ${'/path/to/not/exist'} | ${'パスがROUTESに存在しないとき、Router.replaceを実行せずにtrueを返す'}
     `('$description', async ({ path }) => {
       mockedUseRouter.mockReturnValue({ asPath: path } as any)
-      mockedRouter.replace.mockResolvedValue(true)
+      mockedReplace.mockResolvedValue(true)
 
       await act(async () => {
         result = renderHook(() => useCSR()).result
       })
 
-      expect(mockedRouter.replace).toHaveBeenCalledTimes(0)
+      expect(mockedReplace).toHaveBeenCalledTimes(0)
       expect(result?.current).toBe(true)
     })
   })
@@ -42,14 +41,14 @@ describe('useCSR', () => {
       '$path が $href のパターンに合致するとき、Router.replaceを実行し、falseを返す',
       async ({ path, href }) => {
         mockedUseRouter.mockReturnValue({ asPath: path } as any)
-        mockedRouter.replace.mockResolvedValue(true)
+        mockedReplace.mockResolvedValue(true)
 
         await act(async () => {
           result = renderHook(() => useCSR()).result
         })
 
-        expect(mockedRouter.replace).toHaveBeenCalledTimes(1)
-        expect(mockedRouter.replace).toHaveBeenCalledWith(href, path)
+        expect(mockedReplace).toHaveBeenCalledTimes(1)
+        expect(mockedReplace).toHaveBeenCalledWith(href, path)
         expect(result?.current).toBe(false)
       }
     )

src/pages/Home/stories/__snapshots__/Home.stories.storyshot

@@ -17,6 +17,7 @@ Array [
           href="/login"
           onClick={[Function]}
           onMouseEnter={[Function]}
+          onTouchStart={[Function]}
         >
           ログイン画面（/login）
         </a>