From 92c82edb1c10e87ea8b35fa8f0ebb9c9f2ac0b8f Mon Sep 17 00:00:00 2001 From: Gavin Birkhoff Date: Sun, 18 Jun 2023 17:54:20 +0800 Subject: [PATCH] Update test for useDeepCompareMemoize --- jest.setup.js | 2 + .../__tests__/useDeepCompareEffect.test.ts | 21 ++++++++++ .../__tests__/useDeepCompareMemoize.test.ts | 41 +++++++++++++++++++ 3 files changed, 64 insertions(+) diff --git a/jest.setup.js b/jest.setup.js index 37b2d67..de2d9db 100644 --- a/jest.setup.js +++ b/jest.setup.js @@ -12,3 +12,5 @@ screenfullMethods.forEach((item) => { document[item] = () => {} HTMLElement.prototype[item] = () => {} }) + +process.env.NODE_ENV = 'development' diff --git a/packages/use-deep-compare/src/__tests__/useDeepCompareEffect.test.ts b/packages/use-deep-compare/src/__tests__/useDeepCompareEffect.test.ts index bd70a5e..1e3a57a 100644 --- a/packages/use-deep-compare/src/__tests__/useDeepCompareEffect.test.ts +++ b/packages/use-deep-compare/src/__tests__/useDeepCompareEffect.test.ts @@ -2,6 +2,18 @@ import { renderHook, act } from '@testing-library/react' import { useDeepCompareEffect } from '../index' describe('useDeepCompareEffect', () => { + let originalWarn: any + let mockWarn = jest.fn() + + beforeEach(() => { + originalWarn = console.warn + console.warn = mockWarn + }) + + afterEach(() => { + console.warn = originalWarn + }) + it('should call effect when dependencies change', () => { const effectMock = jest.fn() let dependencies = [1, { foo: 'bar' }, [3, 4]] @@ -30,4 +42,13 @@ describe('useDeepCompareEffect', () => { expect(effectMock).toHaveBeenCalledTimes(1) }) + + it('should return a Error if dependencies are empty', () => { + renderHook(() => useDeepCompareEffect(() => {}, [])) + expect(mockWarn).toHaveBeenCalled() + // TODO + // expect(warnMock).toHaveBeenCalledWith( + // '[Error: useDeepCompareEffect should not be used with no dependencies. Use React.useEffect instead.]' + // ) + }) }) diff --git a/packages/use-deep-compare/src/__tests__/useDeepCompareMemoize.test.ts b/packages/use-deep-compare/src/__tests__/useDeepCompareMemoize.test.ts index 77e136c..e49f196 100644 --- a/packages/use-deep-compare/src/__tests__/useDeepCompareMemoize.test.ts +++ b/packages/use-deep-compare/src/__tests__/useDeepCompareMemoize.test.ts @@ -30,4 +30,45 @@ describe('useDeepCompareMemoize', () => { expect(result.current).not.toBe(dependencies2) expect(result.current).toBe(dependencies1) }) + + it('should return a new reference if dependencies are not deeply equal, custom comparison function', () => { + const dependencies1 = [1, { foo: 'bar' }, [3, 4]] + const dependencies2 = [1, { foo: 'bar' }, [3, 4]] + const deepEqual = (obj1: any, obj2: any): boolean => { + if (obj1 === obj2) { + return true + } + + if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) { + return false + } + + const keys1 = Object.keys(obj1) + const keys2 = Object.keys(obj2) + + if (keys1.length !== keys2.length) { + return false + } + + for (let key of keys1) { + if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) { + return false + } + } + + return true + } + const { result, rerender } = renderHook(({ deps }) => useDeepCompareMemoize(deps, deepEqual), { + initialProps: { deps: dependencies1 } + }) + + expect(result.current).toBe(dependencies1) + + // Rerender with different dependencies + rerender({ deps: dependencies2 }) + + expect(result.current).toEqual(dependencies2) + expect(result.current).not.toBe(dependencies2) + expect(result.current).toBe(dependencies1) + }) })