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

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

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

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

TypeScript

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

React.js

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

Q&A

解決済

1回答

1484閲覧

jestでaxiosをモック化する方法を教えてください。

gomes_2222

総合スコア90

Jest

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

TypeScript

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

React.js

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

0グッド

0クリップ

投稿2023/03/17 07:15

実現したいこと

オリジナルアプリを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

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

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

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

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

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

guest

回答1

0

ベストアンサー

このaxiosをモック化しないとテストが進められないのでモック化したいのですが

axios単位ではなく、Mock Service Workerのように通信全体をモックしてしまうような手段もあります。

投稿2023/03/17 07:28

maisumakun

総合スコア145183

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

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

gomes_2222

2023/03/19 15:33

なるほど。 その手がありましたか。早速やってみます。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問