Reactコンポーネント内の一部の関数をモック化してテストしたいです
解決したいこと
【テスト環境】
Jest・React Testing Library
【困っていること】
UIコンポーネント内で動作する一部の関数を、テストをするために好きな値を返す関数に置き換えたいのですが、やり方がわかりません。
【アプリケーションの動作説明】※実際のソースコードは記事の一番したに記載しております
はじめに、App.tsxで、const [dispFlg,setDispFlg] = useState(false)が初期化されます。これは、下記の関数が成功したときにtrueに切り替わることで、画面に成功の文字を出すためのフラグです。
次に、「Function-start」ボタンを押下します。このとき、handleClick関数が動き「getUserName()」が動きます。
getUserNameでは、まず初めにapiResult変数を初期化します。apiResultは「getUserName()」がreturnする値になります。
次にaxiosによってHTTP通信を行い、外部からuser情報を持ったHTTPレスポンスを受け取ります。
レスポンスはresponse関数に格納します。そのあとは、HTTPステータスによって条件分岐をします。
HTTPステータス200なら、「getUserName()」の戻り値である、apiResultへ値を詰め、returnします。
App.tsxに戻り、getUserNameの戻り値をresult変数に格納します。この後の処理はresultをつかって条件分岐を行います。
apiResultでHTTPステータスが200だったならresult.resultにtrueが入っているので
setDispFlg(true)として、画面に成功の文字を表示します
【やりたいこと】
ボタン押下後に走る「getUserName()」を、好きな値を返すような関数に置き換えたいです。
置き換えることで後続の処理の条件分岐を操り、画面に「成功」の文字の出るのか・出ないのかをテストしたいです。
例えば、getUserName()を以下のtest関数に置き換えることは可能でしょうか。
const test = () => {
const apiResult = {
result:true,
userName: "",
}
// apiResultをPromiseかつaxiosの型にキャスト
return apiResult;
}
該当するソースコード
/**
* App.tsx
*/
import {getUserName} from './getUserName';
import { useState } from 'react';
export default function App() {
const [dispFlg,setDispFlg] = useState(false)
const handleClick = async () => {
const result = await getUserName();
if(result?.Result){
console.log("成功：ユーザ名は=>",result.userName)
setDispFlg(true);
} else {
console.log("失敗")
}
};
return (
<div>
<button onClick={handleClick}>Function-Start</button>
{
dispFlg && <p>成功</p>
}
</div>
);
}
/**
* getUserName.tsx
*/
import baseApi from "./baseApi"
export const getUserName = async () => {
const apiResult = {
result:false,
userName: "",
}
try{
const response = await baseApi.get("/users");
console.log(response);
if (response.status === 200) {
apiResult.result = true;
apiResult.userName = response.data[0].name;
}else{
apiResult.result = false
}
console.log(apiResult);
return apiResult;
} catch (error) {
console.log(error.message);
}
}
/**
* baseApi.tsx
*/
import axios from 'axios';
export const baseApi = axios.create({
baseURL: '"https://jsonplaceholder.typicode.com/',
});
/**
* ボタンをクリックしたときのコンソールログ
*
* {data: Array(10), status: 200, statusText: "", headers: {…}, config: {…}, …}
* getUserName.ts:20 {Result: true, userName: "Leanne Graham"}
* App.tsx:7 成功：ユーザ名は=> Leanne Graham
*/
