実現したいこと
reactでアプリを作成しております。
削除機能を実装しました。これをテストしたいのですが、
削除前にダイアログを表示し、ダイアログでユーザーが「はい」を押したときのみその先の削除処理が走るようにつくりました。
jestでは、削除ボタンを押す処理を実装しただけではダイアログが表示された段階で止まってしまい、削除処理実行されたかの確認が取れません。
そこで、このダイアログ自体をモックして、ダイアログが呼ばれたら「はい」が押されたということを必ず返すようにしたいと考えてます。
前提
モジュールや関数をモック化するのが一般的なやり方と思います。
そこで今回もモック化をするには、まずはダイアログ部分を切り出して外部関数にするなどが必要かと思いました。
発生している問題・エラーメッセージ
現在の処理、仕様を維持したまま関数化するにはどのようにしたらいいでしょうか?
該当のソースコード
MyDialog.tsx
1import { Dialog, DialogTitle, DialogContent, DialogActions, DialogContentText, Button } from '@mui/material' 2 3export type MyDialogProps = { 4 onClose: (value: string) => void 5 title?: string 6 message?: string 7} 8 9export function MyDialog(props: MyDialogProps) { 10 const { onClose, title, message } = props 11 12 return ( 13 <Dialog open onClose={() => onClose('close')}> 14 <DialogTitle>{title}</DialogTitle> 15 <DialogContent> 16 <DialogContentText>{message}</DialogContentText> 17 </DialogContent> 18 <DialogActions> 19 <Button onClick={() => onClose('ok')}>OK</Button> 20 <Button onClick={() => onClose('cancel')} autoFocus> 21 Cancel 22 </Button> 23 </DialogActions> 24 </Dialog> 25 ) 26}
呼び出し側
App.tsx
1import React from 'react' 2import { MyDialog, MyDialogProps } from './MyDialog' 3 4export function App() { 5 const [modalConfig, setModalConfig] = React.useState<MyDialogProps | undefined>() 6 7 /** 8 * 削除ボタンクリック時の処理 9 */ 10 const handleDeleteClick = async () => { 11/*以下の処理をモック化したい 12 const ret = await new Promise<string>((resolve) => { 13 setModalConfig({ 14 onClose: resolve, 15 title: '削除します。よろしいですか?', 16 message: '削除すると二度と元に戻せません。' 17 }) 18 }) 19 setModalConfig(undefined) 20ここまでモック化対象*/ 21 22/*上記をモック化することで、常にret ='ok'が返ってくるようにしたい。*/ 23 if (ret === 'ok') { 24 console.log('削除する:OK時の処理を実行する') 25 } 26 if (ret === 'cancel') { 27 console.log('削除する:Cancel時の処理を実行する') 28 } 29 } 30 31 return ( 32 <div className="App"> 33 <button type="button" onClick={handleDeleteClick}> 34 Delete Confirm 35 </button> 36 37 {modalConfig && <MyDialog {...modalConfig} />} 38 </div> 39 ) 40}
試したこと
どこから手を付けるかわからず、正直、色々試してますが、効果的な手法が思いつきません・・。

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。