Charonyu's Profile

我們要測試兩件事

成功時要變成100%

失敗時變成0%


import { renderHook, act, waitFor } from "@testing-library/react";
import axios from "axios";
import { useUploadProgress } from "../src"; // 替換成你的hook的正確路徑

// Mocking axios post method
jest.mock("axios");
const mockedAxios = axios as jest.Mocked<typeof axios>;

describe("useUploadProgress hook", () => {
  it("should handle the upload progress", async () => {
    // 創建一個 File 來模擬 File 對象
    const file = new File(["file content"], "filename.txt", {
      type: "text/plain",
    });

    // 設定 axios.post 的 mock 實現
    mockedAxios.post.mockResolvedValue({ data: "success" });

    const { result } = renderHook(() => useUploadProgress());

    act(() => {
      // 呼叫 uploadFile 方法
      result.current.uploadFile(file);
    });

    await waitFor(() => {
      expect(result.current.progress).toBe(100);
    });

    // 檢查 progress 是否更新為期望的值
  });

  it("should reset progress on error", async () => {
    const file = new File(["file content"], "filename.txt", {
      type: "text/plain",
    });

    // 設定 axios.post 的 mock 實現來拋出錯誤
    mockedAxios.post.mockRejectedValue(new Error("Error uploading file"));

    const { result } = renderHook(() => useUploadProgress());

    act(() => {
      result.current.uploadFile(file);
    });

    await waitFor(() => {
      expect(result.current.progress).toBe(0);
    });

  });
});

1. `mockedAxios.post.mockResolvedValue({ data: "success" });`

這一行程式碼模擬了 axios.post 。當你在程式碼中使用 axios.post 方法時，它將返回一個解析為 { data: "success" } 的 promise，就像它成功地從伺服器得到了這個回應。這是在模擬一個正常的、沒有錯誤的 HTTP 響應。

2. `const file = new File(["file content"], "filename.txt", { type: "text/plain", });`

這一段程式碼創建了一個新的 File 物件，他模擬一個用戶選擇的文件。這個 File 物件含有一些基本的文件內容（"file content"）、文件名（"filename.txt"）和MIME類型（"text/plain"）。

"file content" 是這個模擬文件的內容。

"filename.txt" 是這個模擬文件的名稱。

{ type: "text/plain" } 是文件的MIME類型，代表這是一個純文本文件。

剩下應該不會太難就不特別講解了

剩下幾天可能會想出一個專案實戰用的hook與測試，但我還沒想好題目

[Day 21] useUploadProgress測試

1. mockedAxios.post.mockResolvedValue({ data: "success" });

2. const file = new File(["file content"], "filename.txt", { type: "text/plain", });

1. `mockedAxios.post.mockResolvedValue({ data: "success" });`

2. `const file = new File(["file content"], "filename.txt", { type: "text/plain", });`