Merge pull request #283 from keyasuda/fix/warnings

テスト時の警告解消
keyasuda · Jan 2, 2025 · de35797 · de35797
2 parents 8b3d301 + 515d309
commit de35797
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 25 deletions.
diff --git 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(
-      <SignInButton afterSignedIn={afterSignedIn}>
-        <div>children</div>
-      </SignInButton>
-    )
+  const renderIt = async () => {
+    await act(async () => {
+      render(
+        <SignInButton afterSignedIn={afterSignedIn}>
+          <div>children</div>
+        </SignInButton>
+      )
+    })
   }
 
   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
@@ -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
@@ -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
@@ -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
@@ -161,7 +161,14 @@ const Belongings = (props) => {
       >
         <Icon>add</Icon>
       </Fab>
-      <Dialog open={dialogOpen} onClose={handleClose} disableBackdropClick>
+      <Dialog
+        open={dialogOpen}
+        onClose={(event, reason) => {
+          if (reason !== 'backdropClick') {
+            handleClose()
+          }
+        }}
+      >
         <DialogTitle>新しい物品を作成</DialogTitle>
         <DialogContent>
           <DialogContentText component="div">

diff --git a/src/component/app/belongings/EditDialog.tsx b/src/component/app/belongings/EditDialog.tsx
@@ -118,7 +118,14 @@ const EditDialog = (props) => {
 
   return (
     <>
-      <Dialog open={open} onClose={handleClose} disableBackdropClick>
+      <Dialog
+        open={open}
+        onClose={(event, reason) => {
+          if (reason !== 'backdropClick') {
+            handleClose()
+          }
+        }}
+      >
         <DialogTitle>
           {newItem && <>物品の追加</>}
           {!newItem && <>物品の編集</>}

diff --git a/src/component/app/print/PrintQueue.tsx b/src/component/app/print/PrintQueue.tsx
@@ -108,7 +108,14 @@ const PrintQueue = (props) => {
         <Sheets items={items} ref={sheetRef} />
       </div>
 
-      <Dialog open={dialogOpen} onClose={handleClose} disableBackdropClick>
+      <Dialog
+        open={dialogOpen}
+        onClose={(event, reason) => {
+          if (reason !== 'backdropClick') {
+            handleClose()
+          }
+        }}
+      >
         <DialogTitle>印刷済みコード</DialogTitle>
         <DialogContent>
           <DialogContentText>

diff --git a/src/component/app/storages/EditDialog.tsx b/src/component/app/storages/EditDialog.tsx
@@ -19,7 +19,14 @@ const EditDialog = (props) => {
   const [printed, setPrinted] = useState(item.printed)
 
   return (
-    <Dialog open={open} onClose={handleClose} disableBackdropClick>
+    <Dialog
+      open={dialogOpen}
+      onClose={(event, reason) => {
+        if (reason !== 'backdropClick') {
+          handleClose()
+        }
+      }}
+    >
       <DialogTitle>保管場所の編集</DialogTitle>
       <DialogContent>
         <DialogContentText component="div">

diff --git a/src/component/app/storages/Storages.tsx b/src/component/app/storages/Storages.tsx
@@ -107,7 +107,14 @@ const Storages = (props) => {
       >
         <Icon>add</Icon>
       </Fab>
-      <Dialog open={dialogOpen} onClose={handleClose} disableBackdropClick>
+      <Dialog
+        open={dialogOpen}
+        onClose={(event, reason) => {
+          if (reason !== 'backdropClick') {
+            handleClose()
+          }
+        }}
+      >
         <DialogTitle>新しい保管場所を作成</DialogTitle>
         <DialogContent>
           <DialogContentText component="div">