実現したいこと
オリジナルアプリをjestでテストしたいです。
バックエンドはrailsで、データのやり取りはreact側からaxiosたたいてAPIを呼びだすという感じです。
ボタンを押すと入力フォームの内容がpostされ、成功の場合は画面に「成功した」旨の表示が出てくるのですが、それをテストしたいです。
発生した問題
APIはaxiosを使って行われるのですが、このaxiosをモック化しないとテストが進められないので
モック化したいのですが、どのようにやったらいいかわかりません。
該当のソースコード
import React, { useState} from "react"; import { useForm } from 'react-hook-form'; import { input } from "../api_actions"; export const Form = () => { const { handleSubmit } = useForm>(); // テスト用に追加。 const [test, setTest] = useState('No); const onSubmit = async (data:any) => { try { const res = await input(data); if (res.status === 200) { // テスト用に追加。ログイン成功時に画面に'OK'表示される。 setTest('OK'); } else { console.log("missed"); } } catch (err) { console.log(err); } } return ( <div> <p>テスト用文字表示。{test}</p> <form onSubmit={handleSubmit(onSubmit)}> <p">message</p> <input type="text" placeholder="here"/> <button type="submit">Post</button> </form> </div> ) } export default Form
import React from "react"; import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import '@testing-library/jest-dom'; import axios from 'axios'; import Form from './Form'; describe('Form', () => { const setupForm = () => { render(<Form />); } it('success form', async() => { setupForm(); jest.spyOn(axios, 'post').mockResolvedValue({"data": {"status":200}}); const text = screen.queryByText('OK'); const input = screen.getByPlaceholderText('here'); userEvent.type(input, "test"); const submitbutton = screen.getByRole('button', { name: 'Post' }); await userEvent.click(submitbutton); await waitFor(() => expect(text).toBeInTheDocument()); }); })
axios
1import axios from "axios" 2 3const axiosInstance = axios.create({ 4 baseURL: "http://localhost:3000", 5}) 6 7export default axiosInstance;
apiactions
1import axiosInstance from "./axios"; 2 3// 新規作成 4export const input = (data: any) => { 5 return axiosInstance.post("/posts", data) 6} 7
試したこと
調べた範囲ですと、テスト対象のコンポーネント上で、axiosインスタンスの作成やメソッドを実行する処理(上記だとapiactionsの内容)を記述していて、それをimportしたテストファイル上でaxiosをモック化してる方法は見つかりました。
しかし、今回のアプリはaxiosインスタンス作成、メソッド実行をそれぞれ別ファイルに分けて、コンポーネントからファイルをimportして使うように設計しました。
この場合に、当該コンポーネントのみをrenderしたjestファイルでaxiosをモック化するにはどうしたらよいのでしょうか?
とりあえず、ネットで見たやり方をもとに上記のようにテストファイルに記述しましたが、実行するとtrycatchのcatchの中のエラーに引っかかったところを見るに、やはりjest上でapiの処理でとまったようです。
テストファイル上で「onSubmit上で呼び出されるinputで帰ってくる値について、モック化して常にこのレスポンスが返ってくるようにする」みたいな趣旨を書かないといけないのでしょうか?
でもその書き方がわからないという状況です。
補足情報(FW/ツールのバージョンなど)
react
jest
typescript
rails
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/03/19 15:33