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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

ユニットテスト

ユニットテストは、システムのテスト手法の一つで、個々のモジュールを対象としたテストの事を指します。対象のモジュールが要求や性能を満たしているか確認する為に実行します。

TypeScript

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

React.js

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

Q&A

0回答

1663閲覧

jestのでaxiosの if(response.status === 200){}の時のテストの書き方がわからない。

amachan1234

総合スコア7

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

ユニットテスト

ユニットテストは、システムのテスト手法の一つで、個々のモジュールを対象としたテストの事を指します。対象のモジュールが要求や性能を満たしているか確認する為に実行します。

TypeScript

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

React.js

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

0グッド

0クリップ

投稿2020/04/28 01:39

現在@testing-library/react-hooksを利用し、
custom hooksのテストを書いています。
if (response.status === 200) {}
このif文の中の処理をテストで再現できず困っています。
何か知見のある方ご教示お願いします。

//hoge.tsx const [Colors, setColors] = useState(defaultbordColors); //関数部分 const delete: (color: Data) => Promise<void> = async ( color: Data //interface ) => { const result: boolean = window.confirm( `color「${color.color}」を削除しますか?` ); if (result) { const response: AxiosResponse<any> = await axios.delete( `http://localhost:3000/api/v1/color/${color._id}` ); if (response.status === 200) { setColors( Colors.filter((hoge: Data) => hoge._id !== color._id) ); } } };
//hoge.test.tsx //Colors = [ { __v: 0, _id: "5e9b06f39655b8230baf7471", color: "blue" }, { __v: 0, _id: "5e9b06f39655b8230baf7471", color: "red" },] test("関数テスト", async () => { const { result } = renderHook(() => useColor(Colors)); window.confirm = jest.fn(() => true); act(() => { result.current.delete(result.current.Colors[1]); }); await (axios.delete as jest.Mock).mockReturnValueOnce({ status: 200, data: [{ message: "削除完了" }], }); ここに再現するコードを書く? expect(result.current.Colors).toEqual([ { __v: 0, _id: "5e9b06f39655b8230baf7471", color: "blue" }, ]); });

環境

//package.json { "name": "cms", "version": "0.1.0", "private": true, "dependencies": { "@emotion/core": "^10.0.28", "@emotion/styled": "^10.0.27", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/enzyme": "^3.10.5", "@types/enzyme-adapter-react-16": "^1.0.6", "axios": "^0.19.2", "emotion": "^10.0.27", "isomorphic-unfetch": "^3.0.0", "next": "^9.3.4", "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1" }, "scripts": { "dev": "next", "start": "react-scripts start", "build": "react-scripts build", "test": "jest", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@testing-library/react-hooks": "^3.2.1", "@types/jest": "^25.2.1", "@types/node": "^13.11.1", "@types/react": "^16.9.34", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.2", "enzyme-to-json": "^3.4.4", "jest": "^25.3.0", "react-test-renderer": "^16.13.1", "ts-jest": "^25.4.0", "typescript": "^3.8.3" } }

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問