如何測驗這個自定義鉤子（useRef）

我正在嘗試測驗這個自定義鉤子，但我不知道如何將 useRef 作為引數發送 ElementRef 正在使用 useRef

import { MutableRefObject, useEffect, useState } from "react";


export default function useNearScreen(elementRef: MutableRefObject<HTMLDivElement>, margin = 80) {

  const [show, setShow] = useState(false);

  useEffect(() => {
    const onChange = (entries: IntersectionObserverEntry[]) => {
        const el: IntersectionObserverEntry = entries[0];
        if (el.isIntersecting) {
            setShow(true)

            observer.disconnect();
        }

    }

    const observer = new IntersectionObserver(onChange, {
        rootMargin: `${margin}px`
    })

    observer.observe(elementRef.current as Element);

    return () => observer.disconnect();
  })
  return show;
 }

uj5u.com熱心網友回復：

首先，jest 默認使用 jsdom 作為其測驗環境。jsdom 不支持IntersectionObserver，見issue#2032。所以我們需要模擬它并手動觸發回呼。

我將使用@testing-library/react-hooks包來測驗反應自定義鉤子。

例如

useNearScreen.ts：

import { MutableRefObject, useEffect, useState } from 'react';

export default function useNearScreen(elementRef: MutableRefObject<HTMLDivElement>, margin = 80) {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const onChange = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
      const el: IntersectionObserverEntry = entries[0];
      if (el.isIntersecting) {
        setShow(true);

        observer.disconnect();
      }
    };

    const observer = new IntersectionObserver(onChange, {
      rootMargin: `${margin}px`,
    });

    observer.observe(elementRef.current as Element);

    return () => observer.disconnect();
  });
  return show;
}

useNearScreen.test.ts：

import { renderHook } from '@testing-library/react-hooks';
import { MutableRefObject } from 'react';
import { useRef } from 'react';
import useNearScreen from './useNearScreen';

describe('useNearScreen', () => {
  test('should pass', () => {
    const mObserver = {
      observe: jest.fn(),
      unobserve: jest.fn(),
      disconnect: jest.fn(),
    };
    const mIntersectionObserver = jest.fn();
    mIntersectionObserver.mockImplementation((callback, options) => {
      callback([{ isIntersecting: true }], mObserver);
      return mObserver;
    });
    window.IntersectionObserver = mIntersectionObserver;

    const mHTMLDivElement = document.createElement('div');
    const { result } = renderHook(() => {
      const elementRef = useRef<HTMLDivElement>(mHTMLDivElement);
      return useNearScreen(elementRef as MutableRefObject<HTMLDivElement>);
    });
    expect(result.current).toBe(true);
    expect(mIntersectionObserver).toBeCalledWith(expect.any(Function), { rootMargin: '80px' });
    expect(mObserver.observe).toBeCalledWith(mHTMLDivElement);
    expect(mObserver.disconnect).toBeCalled();
  });
});

測驗結果：

 PASS  stackoverflow/71118856/useNearScreen.test.ts (9.656 s)
  useNearScreen
    ? should pass (16 ms)

------------------|---------|----------|---------|---------|-------------------
File              | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------------|---------|----------|---------|---------|-------------------
All files         |     100 |    66.67 |     100 |     100 |                   
 useNearScreen.ts |     100 |    66.67 |     100 |     100 | 9                 
------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        10.581 s

標籤：反应 打字稿 单元测试 反应钩子 反应测试库

上一篇：如何gtest/gmock函式接受std::experimental::any引數？

下一篇：Cmocka-我們是否應該為每個測驗創建一個可執行檔案來隔離靜態變數？