iT邦幫忙

2023 iThome 鐵人賽

DAY 23
0

我們這次的測試目標只有兩個

第一個測試:觀察目標元素當掛載時

測試當元件掛載(mount)時,IntersectionObserver 是否開始觀察(observe)正確的目標元素。測試中使用 renderHook 來渲染 hook,並檢查 observe 方法是否被用正確的參數調用,即用 ref.current 作為參數調用,其中 ref.current 是一個 div 元素。

第二個測試:卸載時停止觀察目標元素

測試當元件卸載(unmount)時,IntersectionObserver 是否停止觀察(unobserve)正確的目標元素。測試中使用 unmount 函數來模擬元件的卸載,並檢查 unobserve 方法是否被用正確的參數調用。

測試:

import { renderHook, act } from "@testing-library/react";
import { useRef } from "react";
import { useIntersectionObserver } from "../src";

describe('useIntersectionObserver', () => {
  let observe: jest.Mock;
  let unobserve: jest.Mock;
  let disconnect: jest.Mock;

  beforeEach(() => {
    observe = jest.fn();
    unobserve = jest.fn();
    disconnect = jest.fn();

    // @ts-ignore
    window.IntersectionObserver = jest.fn(() => ({
      observe,
      unobserve,
      disconnect,
    }));
  });

  it('should observe the target element on mount', () => {
    const { result } = renderHook(() => {
      const ref = { current: document.createElement('div') };
      const isIntersecting = useIntersectionObserver(ref);

      return { ref, isIntersecting };
    });

    expect(observe).toHaveBeenCalledWith(result.current.ref.current);
  });

  it('should unobserve the target element on unmount', () => {
    const { result, unmount } = renderHook(() => {
      const ref = { current: document.createElement('div') };
      const isIntersecting = useIntersectionObserver(ref);

      return { ref, isIntersecting };
    });

    act(() => {
      unmount();
    });

    expect(unobserve).toHaveBeenCalledWith(result.current.ref.current);
  });
});

上一篇
[Day 22] useIntersectionObserver監控畫面
下一篇
[Day 24] useInterval 製作
系列文
React進階班,用typescript與jest製作自己的custom hooks庫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言