Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade react/next version #10

Merged
merged 13 commits into from
Nov 24, 2022
Merged

Upgrade react/next version #10

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
ef5b726
update react next
JinTakenaka Nov 17, 2022
a4c9193
upgrade some
JinTakenaka Nov 18, 2022
4ba6bd9
fix test
JinTakenaka Nov 21, 2022
5cc35c5
fix test
JinTakenaka Nov 21, 2022
0a2fd78
fix storybook
JinTakenaka Nov 21, 2022
3df0658
fix error
JinTakenaka Nov 21, 2022
bd3069f
modify format
JinTakenaka Nov 22, 2022
15c729c
remove unnecessary dependency
JinTakenaka Nov 22, 2022
9dc8420
use next/router
JinTakenaka Nov 22, 2022
33b0d6b
modify code format
JinTakenaka Nov 22, 2022
296268c
fix conde format
JinTakenaka Nov 22, 2022
35455e3
fix conde format
JinTakenaka Nov 22, 2022
26f04a6
fix conde format
JinTakenaka Nov 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
54 changes: 29 additions & 25 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

next13でnext/routerをインポートすると

you should only use "next/router" on the client side of your app.

と言われていしまうので、その対策として導入

"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"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

どうにも現状ではreact18でstorybookを動作させるにはreact-test-rendererのバージョンを強制的に指定する必要がある模様

},
"lint-staged": {
"src/**/*.{ts,tsx}": [
Expand Down
18 changes: 9 additions & 9 deletions src/hooks/tests/useCSR.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import Router, { useRouter } from 'next/router'
import { renderHook, act, RenderResult } from '@testing-library/react-hooks'

import { useCSR } from '../useCSR'

jest.mock('next/router')
jest.mock('next/router', () => require('next-router-mock'))
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これで

you should only use "next/router" on the client side of your app.

と言われない

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

細かいですが、jest.mockはimportの後の行に書きましょう。
記載自体は問題ないです。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

修正：26f04a6


const mockedUseRouter = jest.mocked(useRouter)
const mockedRouter = jest.mocked(Router)
import mockRouter from 'next-router-mock'
const mockedUseRouter = jest.spyOn(require('next/router'), 'useRouter')
const mockedReplace = jest.spyOn(mockRouter, 'replace')

let result: RenderResult<boolean> | undefined

Expand All @@ -22,13 +22,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)
})
})
Expand All @@ -42,14 +42,14 @@ describe('useCSR', () => {
'$path が $href のパターンに合致するとき、Router.replaceを実行し、falseを返す',
async ({ path, href }) => {
mockedUseRouter.mockReturnValue({ asPath: path } as any)
mockedRouter.replace.mockResolvedValue(true)
mockedReplace.mockResolvedValue(false)

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)
}
)
Expand Down
2 changes: 1 addition & 1 deletion src/hooks/useCSR.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useState, useEffect } from 'react'
import Router, { useRouter } from 'next/router'

import { ROUTES } from '../config/routes'
import Router, { useRouter } from 'next/router'

export const useCSR = (): boolean => {
const [execRouting, setExecRouting] = useState(false)
Expand Down
1 change: 1 addition & 0 deletions src/pages/Home/stories/__snapshots__/Home.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ Array [
href="/login"
onClick={[Function]}
onMouseEnter={[Function]}
onTouchStart={[Function]}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

（おそらく）React18の影響？

>
ログイン画面（/login）
</a>
Expand Down