我正在尝试为去抖动功能编写单元测试。我很难考虑。
这是代码：
function debouncer(func, wait, immediate) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => {
timeout = null;
if (!immediate)
func.apply(this, args);
}, wait);
if (immediate && !timeout)
func.apply(this, args);
};
}
我应该如何开始？
实际上，您不需要使用 Sinon 来测试去抖动。Jest 可以在 JavaScript 代码中模拟所有计时器。
查看以下代码（它是 TypeScript，但您可以轻松地将其转换为 JavaScript）：
import * as _ from 'lodash';
// Tell Jest to mock all timeout functions
jest.useFakeTimers();
describe('debounce', () => {
let func: jest.Mock;
let debouncedFunc: Function;
beforeEach(() => {
func = jest.fn();
debouncedFunc = _.debounce(func, 1000);
});
test('execute just once', () => {
for (let i = 0; i < 100; i++) {
debouncedFunc();
}
// Fast-forward time
jest.runAllTimers();
expect(func).toBeCalledTimes(1);
});
});
更多信息：定时器模拟
您可能需要检查 debouncer 函数中的逻辑：
timeout将始终由最后一条if()语句设置this将始终是undefined因为箭头函数使用“this封闭词法上下文的值”并且debouncer()被设计为用作独立函数。话虽如此，听起来您真正的问题是关于测试去抖动功能。
您可以通过使用模拟来跟踪函数调用和假计时器来模拟时间的流逝，从而测试函数是否已消除抖动。
这是一个使用Jest模拟函数和使用from去抖动的函数的Sinon假计时器的简单示例：debounce()Lodash
const _ = require('lodash');
import * as sinon from 'sinon';
let clock;
beforeEach(() => {
clock = sinon.useFakeTimers();
});
afterEach(() => {
clock.restore();
});
test('debounce', () => {
const func = jest.fn();
const debouncedFunc = _.debounce(func, 1000);
// Call it immediately
debouncedFunc();
expect(func).toHaveBeenCalledTimes(0); // func not called
// Call it several times with 500ms between each call
for(let i = 0; i < 10; i++) {
clock.tick(500);
debouncedFunc();
}
expect(func).toHaveBeenCalledTimes(0); // func not called
// wait 1000ms
clock.tick(1000);
expect(func).toHaveBeenCalledTimes(1); // func called
});
如果在您的代码中您正在这样做：
import debounce from 'lodash/debounce';
myFunc = debounce(myFunc, 300);
并且您想测试该函数myFunc或调用它的函数，然后在您的测试中您可以模拟debounceusing的实现jest以使其仅返回您的函数：
import debounce from 'lodash/debounce';
// Tell Jest to mock this import
jest.mock('lodash/debounce');
it('my test', () => {
// ...
debounce.mockImplementation(fn => fn); // Assign the import a new implementation. In this case it's to execute the function given to you
// ...
});
来源：https ://gist.github.com/apieceofbart/d28690d52c46848c39d904ce8968bb27
我喜欢这个类似的版本更容易失败：
jest.useFakeTimers();
test('execute just once', () => {
const func = jest.fn();
const debouncedFunc = debounce(func, 500);
// Execute for the first time
debouncedFunc();
// Move on the timer
jest.advanceTimersByTime(250);
// try to execute a 2nd time
debouncedFunc();
// Fast-forward time
jest.runAllTimers();
expect(func).toBeCalledTimes(1);
});
使用现代假计时器（Jest 27 已经默认），您可以更简洁地对其进行测试：
import debounce from "lodash.debounce";
describe("debounce", () => {
beforeEach(() => {
jest.useFakeTimers("modern");
});
afterEach(() => {
jest.useRealTimers();
});
it("should work properly", () => {
const callback = jest.fn();
const debounced = debounce(callback, 500);
debounced();
expect(callback).not.toBeCalled();
jest.advanceTimersByTime(100);
debounced();
expect(callback).not.toBeCalled();
jest.advanceTimersByTime(499);
expect(callback).not.toBeCalled();
jest.advanceTimersByTime(1);
expect(callback).toBeCalledTimes(1);
});
it("should fire with lead", () => {
const callback = jest.fn();
const debounced = debounce(callback, 500, { leading: true });
expect(callback).not.toBeCalled();
debounced();
expect(callback).toBeCalledTimes(1);
jest.advanceTimersByTime(100);
debounced();
expect(callback).toBeCalledTimes(1);
jest.advanceTimersByTime(499);
expect(callback).toBeCalledTimes(1);
jest.advanceTimersByTime(1);
expect(callback).toBeCalledTimes(2);
});
});
您可以将其实现为像这样去抖动的状态钩子......
import debounce from "lodash.debounce";
import { Dispatch, useCallback, useState } from "react";
export function useDebouncedState<S>(
initialValue: S,
wait: number,
debounceSettings?: Parameters<typeof debounce>[2]
): [S, Dispatch<S>] {
const [state, setState] = useState<S>(initialValue);
const debouncedSetState = useCallback(
debounce(setState, wait, debounceSettings),
[wait, debounceSettings]
);
return [state, debouncedSetState];
}
并测试为
/**
* @jest-environment jsdom
*/
import { act, render, waitFor } from '@testing-library/react';
import React from 'react';
import { useDebouncedState } from "./useDebouncedState";
describe("useDebounceState", () => {
beforeEach(() => {
jest.useFakeTimers("modern");
});
afterEach(() => {
jest.useRealTimers();
});
it("should work properly", async () => {
const callback = jest.fn();
let clickCount = 0;
function MyComponent() {
const [foo, setFoo] = useDebouncedState("bar", 500);
callback();
return <div data-testid="elem" onClick={() => { ++clickCount; setFoo("click " + clickCount); }}>{foo}</div>
}
const { getByTestId } = render(<MyComponent />)
const elem = getByTestId("elem");
expect(callback).toBeCalledTimes(1);
expect(elem.textContent).toEqual("bar");
jest.advanceTimersByTime(100);
elem.click();
expect(callback).toBeCalledTimes(1);
expect(elem.textContent).toEqual("bar");
jest.advanceTimersByTime(399);
expect(callback).toBeCalledTimes(1);
expect(elem.textContent).toEqual("bar");
act(() => jest.advanceTimersByTime(1));
await waitFor(() => {
expect(callback).toBeCalledTimes(2);
expect(elem.textContent).toEqual("click 1");
});
elem.click();
await waitFor(() => {
expect(callback).toBeCalledTimes(2);
expect(elem.textContent).toEqual("click 1");
});
act(() => jest.advanceTimersByTime(500));
await waitFor(() => {
expect(callback).toBeCalledTimes(3);
expect(elem.textContent).toEqual("click 2");
});
});
});
源代码在https://github.com/trajano/react-hooks-tests/tree/master/src/useDebouncedState
另一种方法是刷新 debounce 函数以使其立即执行：
test('execute just once', () => {
const func = jest.fn();
const debouncedFunc = debounce(func, 500);
// Execute for the first time
debouncedFunc();
debouncedFunc.flush();
// try to execute a 2nd time
debouncedFunc();
debouncedFunc.flush();
expect(func).toBeCalledTimes(1);
});
花了很多时间来弄清楚......终于这工作了..
jest.mock('lodash', () => {
const module = jest.requireActual('lodash');
module.debounce = jest.fn(fn => fn);
return module;
});