diff --git a/src/utils/_tests/useCustomCompareEffect.test.ts b/src/utils/_tests/useCustomCompareEffect.test.ts new file mode 100644 index 0000000..005b48f --- /dev/null +++ b/src/utils/_tests/useCustomCompareEffect.test.ts @@ -0,0 +1,44 @@ +import { renderHook, cleanup } from '@testing-library/react-hooks'; +import { describe, afterEach, it, expect, vi } from 'vitest'; +import { useCustomCompareEffect } from '../useCustomCompareEffect'; +import type { DependencyList } from 'react'; + +const isEqual = (prevDeps: DependencyList, nextDeps: DependencyList) => + prevDeps.every((dep, index) => dep === nextDeps[index]); + +describe('useCustomCompareEffect', () => { + afterEach(cleanup); + + it('should call the effect when deps change and isEqual returns false', () => { + const effect = vi.fn(); + const isEqual = vi.fn().mockReturnValue(false); + const { rerender } = renderHook(({ deps }) => useCustomCompareEffect(effect, deps, isEqual), { + initialProps: { deps: [1, 2, 3] }, + }); + expect(effect).toHaveBeenCalledTimes(1); + + rerender({ deps: [1, 2, 4] }); + expect(effect).toHaveBeenCalledTimes(2); + }); + + it('should not call the effect when deps change but isEqual returns true', () => { + const effect = vi.fn(); + const { rerender } = renderHook(({ deps }) => useCustomCompareEffect(effect, deps, isEqual), { + initialProps: { deps: [1, 2, 3] }, + }); + expect(effect).toHaveBeenCalledTimes(1); + + rerender({ deps: [1, 2, 3] }); + expect(effect).toHaveBeenCalledTimes(1); + }); + + it('should handle empty deps array', () => { + const effect = vi.fn(); + const { rerender } = renderHook(() => useCustomCompareEffect(effect, [], isEqual)); + + expect(effect).toHaveBeenCalledTimes(1); + + rerender(); + expect(effect).toHaveBeenCalledTimes(1); + }); +}); diff --git a/src/utils/_tests/useDeepCompareEffect.test..ts b/src/utils/_tests/useDeepCompareEffect.test..ts new file mode 100644 index 0000000..6b3be4b --- /dev/null +++ b/src/utils/_tests/useDeepCompareEffect.test..ts @@ -0,0 +1,53 @@ +import { renderHook, cleanup } from '@testing-library/react-hooks'; +import { describe, afterEach, it, expect, vi } from 'vitest'; +import { useDeepCompareEffect } from '../useDeepCompareEffect'; + +describe('useDeepCompareEffect', () => { + afterEach(cleanup); + + it('should call the effect when deps change shallowly', () => { + const effect = vi.fn(); + const { rerender } = renderHook(({ deps }) => useDeepCompareEffect(effect, deps), { + initialProps: { deps: [1, 2, 3] }, + }); + + expect(effect).toHaveBeenCalledTimes(1); + + rerender({ deps: [1, 2, 4] }); + expect(effect).toHaveBeenCalledTimes(2); + }); + + it('should call the effect when deps change deeply', () => { + const effect = vi.fn(); + const { rerender } = renderHook(({ deps }) => useDeepCompareEffect(effect, deps), { + initialProps: { deps: [{ a: 1, b: 2, c: { d: 3 } }] }, + }); + + expect(effect).toHaveBeenCalledTimes(1); + + rerender({ deps: [{ a: 1, b: 2, c: { d: 4 } }] }); + expect(effect).toHaveBeenCalledTimes(2); + }); + + it('should not call the effect when deps do not change', () => { + const effect = vi.fn(); + const { rerender } = renderHook(({ deps }) => useDeepCompareEffect(effect, deps), { + initialProps: { deps: [{ a: 1, b: 2, c: { d: 3 } }] }, + }); + + expect(effect).toHaveBeenCalledTimes(1); + + rerender({ deps: [{ a: 1, b: 2, c: { d: 3 } }] }); + expect(effect).toHaveBeenCalledTimes(1); + }); + + it('should handle empty deps array', () => { + const effect = vi.fn(); + const { rerender } = renderHook(() => useDeepCompareEffect(effect, [])); + + expect(effect).toHaveBeenCalledTimes(1); + + rerender(); + expect(effect).toHaveBeenCalledTimes(1); + }); +});