2

一个简单的 react hooks 功能,请教 jest 单元测试怎么写

 2 years ago
source link: https://www.v2ex.com/t/808704
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

V2EX  ›  React

一个简单的 react hooks 功能,请教 jest 单元测试怎么写

  chenliangngng · 26 分钟前 · 28 次点击

就是实现一个异步操作(比如接口)的 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);
     });
 })

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK