getByPlaceholderText 可以找到placeholder相同值的DOMgetByText 可以找到一樣text的DOMfireEvent.change 是用於模擬 React 中的用戶輸入事件，它可以讓我們模擬用戶在輸入字段中輸入值的情況fireEvent.click就是模擬點擊事件import { renderHook, act, waitFor } from "@testing-library/react"; import axios from "axios"; import useLogin from "./useLogin"; // import "@testing-library/jest-dom"; // Mock axios.post jest.mock("axios"); const mockedAxios = axios as jest.Mocked<typeof axios>; describe("useLogin", () => { afterEach(() => { // Clear all instances and calls to constructor and all methods: // 每次測試結束要清除 mockedAxios.post.mockClear(); }); it("handles login correctly", async () => { const { result } = renderHook(() => useLogin()); act(() => { result.current.login("testAccount", "testPassword"); }); waitFor(() => { expect(axios.post).toHaveBeenCalledWith("api", { account: "testAccount", password: "testPassword", }); }); }); it("sets error if account is not provided", () => { const { result } = renderHook(() => useLogin()); act(() => { result.current.login("", "testPassword"); }); expect(result.current.error).toBe("請輸入帳號"); }); it("sets error if password is not provided", () => { const { result } = renderHook(() => useLogin()); act(() => { result.current.login("testAccount", ""); }); expect(result.current.error).toBe("請輸入密碼"); }); it("handles error on failed axios request", async () => { mockedAxios.post.mockRejectedValueOnce(new Error("Some error occurred")); const { result } = renderHook(() => useLogin()); act(() => { result.current.login("testAccount", "testPassword"); }); waitFor(() => { expect(result.current.error).toBe("Error: Some error occurred"); }); }); });
import React from "react"; import { render, fireEvent, screen } from "@testing-library/react"; import Login from "./page"; import axios from "axios"; // 一樣先把axios改成mock的形式 jest.mock('axios', () => ({ post: jest.fn(() => Promise.resolve({ data: {} })), })); describe("Login Component", () => { it("should call login function with the correct arguments when Sign In button is clicked", () => { render(<Login />); // Find the input fields and button const accountInput = screen.getByPlaceholderText("Account"); const passwordInput = screen.getByPlaceholderText("Password"); const signInButton = screen.getByText("Sign In"); // Fill in the input fields fireEvent.change(accountInput, { target: { value: "testAccount" } }); fireEvent.change(passwordInput, { target: { value: "testPassword" } }); // Click the sign in button fireEvent.click(signInButton); // Check if login function was called with the correct arguments expect(axios.post).toHaveBeenCalledWith("api", { account: "testAccount", password: "testPassword", }); }); });