如何使用 jest 創建一個單元測試用例來為我的 debounce 和節流 function 獲得最大的代碼覆蓋率？

Question

我需要為庫編寫單元測試以獲得最大的代碼覆蓋率——行覆蓋率和分支覆蓋率。

 export const throttle = (fn, delay) => { let last = 0; return (...args) => { const now = new Date().getTime(); if(now - last < delay) { return; } last = now; return fn(...args); } } export const debounce = ( fn, delay) => { let timeoutID; return function(...args){ if (timeoutID){ clearTimeout(timeoutID); } timeoutID = setTimeout( () => { fn(...args); }, delay); }; }

 import { throttle} from './throttle' import { debounce} from './debounce' document.getElementById('myid').addEventListener( "click", debounce(e => { console.log('clicked'); }, 2000)) document.getElementById('myid2').addEventListener('click', throttle(() => { console.log('you clicked me'); }, 5000));

我有以下被導出到主 js 頁面的譴責和限制函數。 我對如何為此使用 jest 編寫測試用例感到困惑。 我使用 lodash 閱讀的每個問題，但我只需要一個簡單的單元測試用例來處理這兩個函數。 我是開玩笑的新手，在閱讀文檔后，我不明白譴責和扼殺的“期望”是什么。 誰能幫助我並提供一些澄清？

Answer 1

你不需要 DOM 相關的東西來進行單元測試。 為了測試throttle ，您應該模擬Date 。 為了測試debounce ，您應該使用假計時器。 Date和setTimeout有副作用，我們應該模擬它們以消除副作用。

throttle.js ：

export const throttle = (fn, delay) => {
  let last = 0;
  return (...args) => {
    const now = new Date().getTime();
    if (now - last < delay) {
      return;
    }
    last = now;
    return fn(...args);
  };
};

throttle.test.js ：

import { throttle } from './throttle';

describe('65593662', () => {
  describe('throttle', () => {
    afterEach(() => {
      jest.restoreAllMocks();
    });
    it('should call function if now - last > delay', () => {
      const fn = jest.fn();
      const throttledFn = throttle(fn, 1000);
      const getTimeSpy = jest.spyOn(Date.prototype, 'getTime').mockReturnValue(2000);
      throttledFn('param');
      expect(fn).toBeCalledWith('param');
      expect(getTimeSpy).toBeCalledTimes(1);
    });

    it('should call function if now - last = delay', () => {
      const fn = jest.fn();
      const throttledFn = throttle(fn, 1000);
      const getTimeSpy = jest.spyOn(Date.prototype, 'getTime').mockReturnValue(1000);
      throttledFn('param');
      expect(fn).toBeCalledWith('param');
      expect(getTimeSpy).toBeCalledTimes(1);
    });

    it('should not call function if now - last < delay', () => {
      const fn = jest.fn();
      const throttledFn = throttle(fn, 1000);
      const getTimeSpy = jest.spyOn(Date.prototype, 'getTime').mockReturnValue(100);
      throttledFn('param');
      expect(fn).not.toBeCalled();
      expect(getTimeSpy).toBeCalledTimes(1);
    });
  });
});

debounce.js ：

export const debounce = (fn, delay) => {
  let timeoutID;
  return function (...args) {
    if (timeoutID) {
      clearTimeout(timeoutID);
    }
    timeoutID = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};

debounce.test.js ：

import { debounce } from './debounce';

jest.useFakeTimers();

describe('65593662', () => {
  describe('debounce', () => {
    it('should call function if timeoutID is undefined', () => {
      const fn = jest.fn();

      const debouncedFn = debounce(fn, 1000);
      debouncedFn('param');
      jest.advanceTimersByTime(1000);
      expect(fn).toBeCalledWith('param');
      expect(fn).toBeCalledTimes(1);
    });

    it('should not call function once if timeoutID exists', () => {
      const fn = jest.fn();

      const debouncedFn = debounce(fn, 1000);
      debouncedFn('param');
      debouncedFn('param');
      debouncedFn('param');
      jest.runAllTimers();
      expect(fn).toBeCalledWith('param');
      expect(fn).toBeCalledTimes(1);
    });
  });
});

單元測試結果：

 PASS  examples/65593662/throttle.test.ts
  65593662
    throttle
      ✓ should call function if now - last > delay (3 ms)
      ✓ should call function if now - last = delay
      ✓ should not call function if now - last < delay (1 ms)

 PASS  examples/65593662/debounce.test.ts
  65593662
    debounce
      ✓ should call function if timeoutID is undefined (5 ms)
      ✓ should not call function once if timeoutID exists (1 ms)

-------------|---------|----------|---------|---------|-------------------
File         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-------------|---------|----------|---------|---------|-------------------
All files    |     100 |      100 |     100 |     100 |                   
 debounce.ts |     100 |      100 |     100 |     100 |                   
 throttle.ts |     100 |      100 |     100 |     100 |                   
-------------|---------|----------|---------|---------|-------------------
Test Suites: 2 passed, 2 total
Tests:       5 passed, 5 total
Snapshots:   0 total
Time:        4.168 s