diff --git a/src/component/SignInButton.test.tsx b/src/component/SignInButton.test.tsx
index 14b4c2c..8cc7d97 100644
--- a/src/component/SignInButton.test.tsx
+++ b/src/component/SignInButton.test.tsx
@@ -5,6 +5,7 @@ import {
TestingLibraryElementError,
} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
+import { act } from '@testing-library/react'
import * as authModule from './authentication'
import SignInButton from './SignInButton'
@@ -20,12 +21,14 @@ describe('SignInButton', () => {
signIn.mockResolvedValue()
})
- const renderIt = () => {
- render(
-
- children
-
- )
+ const renderIt = async () => {
+ await act(async () => {
+ render(
+
+ children
+
+ )
+ })
}
describe('signed out', () => {
@@ -41,7 +44,10 @@ describe('SignInButton', () => {
initAuth.mockImplementationOnce(() => false)
isSignedIn.mockImplementationOnce(() => true)
await renderIt()
- await userEvent.click(screen.getByRole('button'))
+
+ await act(async () => {
+ await userEvent.click(screen.getByRole('button'))
+ })
expect(signIn).toHaveBeenCalled()
})
diff --git a/src/component/SignInButton.tsx b/src/component/SignInButton.tsx
index 06593ff..3a006c0 100644
--- a/src/component/SignInButton.tsx
+++ b/src/component/SignInButton.tsx
@@ -14,8 +14,13 @@ const SignInButton = (props) => {
let [signedIn, setSignedIn] = useState(false)
useEffect(async () => {
- setSignedIn(await initAuth())
- setLoaded(true)
+ const init = async () => {
+ const authStatus = await initAuth()
+ setSignedIn(authStatus)
+ setLoaded(true)
+ }
+
+ init()
window.addEventListener('focus', () => setSignedIn(isSignedIn()), false)
}, [])
diff --git a/src/component/app/AppBar.test.tsx b/src/component/app/AppBar.test.tsx
index 0a05d8c..8d3280a 100644
--- a/src/component/app/AppBar.test.tsx
+++ b/src/component/app/AppBar.test.tsx
@@ -127,15 +127,22 @@ describe('AppBar', () => {
id: 'belonginguuid',
})
- beforeEach(() => {
+ beforeEach(async () => {
+ // async を追加
renderIt('')
const button = screen.getByLabelText('scan')
- userEvent.click(button)
+ // クリックイベントを act でラップ
+ await act(async () => {
+ await userEvent.click(button)
+ })
})
describe('code is of belonging', () => {
- it('should navigate to belonging page', () => {
- act(() => codeReaderOnRead(code))
+ it('should navigate to belonging page', async () => {
+ // async を追加
+ await act(async () => {
+ codeReaderOnRead(code)
+ })
expect(history.push).toHaveBeenCalledWith(
'/app/file-id/belongings/belonginguuid'
)
@@ -148,8 +155,11 @@ describe('AppBar', () => {
id: 'storageuuid',
})
- it('should navigate to storage page', () => {
- act(() => codeReaderOnRead(code))
+ it('should navigate to storage page', async () => {
+ // async を追加
+ await act(async () => {
+ codeReaderOnRead(code)
+ })
expect(history.push).toHaveBeenCalledWith(
'/app/file-id/storages/storageuuid'
)
@@ -159,8 +169,11 @@ describe('AppBar', () => {
describe('code is unknown', () => {
const codes = ['generalpurposebarcode', '1234567890']
codes.map((code) => {
- it('should navigate to belonging page, code as ID', () => {
- act(() => codeReaderOnRead(code))
+ it('should navigate to belonging page, code as ID', async () => {
+ // async を追加
+ await act(async () => {
+ codeReaderOnRead(code)
+ })
expect(history.push).toHaveBeenCalledWith(
`/app/file-id/belongings/${code}`
)
diff --git a/src/component/app/AppBar.tsx b/src/component/app/AppBar.tsx
index aaf73e0..b5e09c6 100644
--- a/src/component/app/AppBar.tsx
+++ b/src/component/app/AppBar.tsx
@@ -1,7 +1,7 @@
import React, { useEffect, useState, useRef } from 'react'
import { useParams, useHistory, Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
-import { fade, makeStyles } from '@material-ui/core/styles'
+import { alpha, makeStyles } from '@material-ui/core/styles'
import { default as MUIAppBar } from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import InputBase from '@material-ui/core/InputBase'
@@ -31,9 +31,9 @@ const AppBar = (props) => {
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
- backgroundColor: fade(theme.palette.common.white, 0.15),
+ backgroundColor: alpha(theme.palette.common.white, 0.15),
'&:hover': {
- backgroundColor: fade(theme.palette.common.white, 0.25),
+ backgroundColor: alpha(theme.palette.common.white, 0.25),
},
marginRight: 0,
marginLeft: 0,
diff --git a/src/component/app/belongings/Belongings.tsx b/src/component/app/belongings/Belongings.tsx
index 647df57..69e47a7 100644
--- a/src/component/app/belongings/Belongings.tsx
+++ b/src/component/app/belongings/Belongings.tsx
@@ -161,7 +161,14 @@ const Belongings = (props) => {
>
add
-