就是实现一个异步操作(比如接口)的 loading 功能
export const useLoading = <T extends (...arg: any) => any>(
callback: T,
deps: any[] = [],
): [boolean, (...args: any[]) => Promise<ReturnType<T>>] => {
const [loading, setLoading] = useState(false);
const executor = useCallback(async (...args) => {
try {
setLoading(true);
return await callback(...args);
} finally {
setLoading(false);
}
}, deps);
return [loading, executor];
};
下面是我写的,第一个 expect 运行对,第二个 expect 想验证函数执行完后 loading 变回 false,但是运行 result.current[0]实际为 true,请教各位大佬
import {renderHook, act} from '@testing-library/react-hooks'
describe('useLoading', () => {
it('useLoading', async () => {
jest.useFakeTimers();
const fn = async () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(true), 1000);
});
};
const { result } = renderHook(() => useLoading(fn));
act(() => {
const [, executor] = result.current;
executor();
jest.advanceTimersByTime(500);
});
expect(result.current[0]).toBe(true);
act(() => {
jest.runAllTicks();
jest.runAllTimers();
});
expect(result.current[0]).toBe(false);
});
})
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.