現在@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" } }
あなたの回答
tips
プレビュー