質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

359閲覧

コンポーネントの中の処理を外部関数化してモック化したい。

gomes_2222

総合スコア91

Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2023/03/24 01:37

実現したいこと

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}

試したこと

どこから手を付けるかわからず、正直、色々試してますが、効果的な手法が思いつきません・・。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

結果論ですが、外部モック化せずとも処理ができました。

ダイアログが表示された際に、userEventでOKボタンをクリックする動作をすることで不通に進めることができました。

投稿2023/04/14 01:07

gomes_2222

総合スコア91

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問