chore: port tests from merge-refs-playground

theKashey · Dec 26, 2023 · fb27d22 · fb27d22
1 parent 47cbc58
commit fb27d22
Show file tree

Hide file tree

Showing 7 changed files with 3,311 additions and 2,312 deletions.
diff --git a/.size-limit.js b/.size-limit.js
@@ -1,14 +1,14 @@
 module.exports = [
   {
     path: 'dist/es2015/index.js',
-    limit: '0.4 KB',
+    limit: '0.5 KB',
   },
   {
     path: 'dist/es2015/useRef.js',
     limit: '0.2 KB',
   },
   {
     path: 'dist/es2015/useMergeRef.js',
-    limit: '0.2 KB',
+    limit: '0.3 KB',
   },
 ];
diff --git a/.size.json b/.size.json
@@ -2,7 +2,7 @@
   {
     "name": "dist/es2015/index.js",
     "passed": true,
-    "size": 380
+    "size": 467
   },
   {
     "name": "dist/es2015/useRef.js",
@@ -12,6 +12,6 @@
   {
     "name": "dist/es2015/useMergeRef.js",
     "passed": true,
-    "size": 174
+    "size": 270
   }
 ]
diff --git a/__tests__/index.tsx b/__tests__/index.tsx
@@ -1,196 +1,194 @@
-import { configure, mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+/**
+ * @jest-environment jsdom
+ */
+import {render} from '@testing-library/react'
 import * as React from 'react';
-import { createRef } from 'react';
+import {createRef} from 'react';
 
 import {
-  refToCallback,
-  useRefToCallback,
-  createCallbackRef,
-  mergeRefs,
-  useTransformRef,
-  useCallbackRef,
-  useMergeRefs,
+    refToCallback,
+    useRefToCallback,
+    createCallbackRef,
+    mergeRefs,
+    useTransformRef,
+    useCallbackRef,
+    useMergeRefs,
 } from '../src';
 
-configure({ adapter: new Adapter() });
-
 describe('Specs', () => {
-  describe('useCallbackRef', () => {
-    it('base - createRef', () => {
-      const ref = React.createRef<HTMLDivElement>();
-      mount(<div ref={ref}>test</div>);
-      expect(ref.current).not.toBe(null);
+    describe('useCallbackRef', () => {
+        it('base - createRef', () => {
+            const ref = React.createRef<HTMLDivElement>();
+            render(<div ref={ref}>test</div>);
+            expect(ref.current).not.toBe(null);
+        });
+
+        it('shall work as createRef', () => {
+            const spy = jest.fn();
+            const ref = createCallbackRef<HTMLDivElement>(spy);
+
+            const {rerender} = render(<div ref={ref}>test</div>);
+            rerender(<div ref={ref} data-any>test</div>)
+
+            expect(spy).toBeCalledWith(ref.current, null);
+            expect(spy).toHaveBeenCalledTimes(1);
+            expect(ref.current).not.toBe(null);
+        });
+
+        it('shall work as useRef', () => {
+            const spy1 = jest.fn();
+            const spy2 = jest.fn();
+            let counter = 0;
+
+            const Test = (_props:any) => {
+                const x = counter++;
+                const ref = useCallbackRef<HTMLDivElement>(null, () => spy1(x));
+                const mref = useMergeRefs([ref, spy2]);
+
+                return (
+                    <div key={x < 2 ? '1' : '2'} ref={mref}>
+                        test
+                    </div>
+                );
+            };
+
+            const {rerender} = render(<Test/>);
+            expect(spy1).toBeCalledWith(0);
+            expect(spy1).toHaveBeenCalledTimes(1);
+            expect(spy2).not.toBeCalledWith(null);
+            expect(spy2).toHaveBeenCalledTimes(1);
+
+            rerender(<Test x={42}/>);
+            expect(spy1).toBeCalledWith(0);
+            expect(spy1).toHaveBeenCalledTimes(1);
+            expect(spy2).not.toBeCalledWith(null);
+
+            rerender(<Test x={24}/>);
+            expect(spy1).toBeCalledWith(2);
+            expect(spy1).toHaveBeenCalledTimes(3);
+            expect(spy2).toBeCalledWith(null);
+        });
     });
 
-    it('shall work as createRef', () => {
-      const spy = jest.fn();
-      const ref = createCallbackRef<HTMLDivElement>(spy);
-
-      mount(<div ref={ref}>test</div>)
-        .setProps({})
-        .update();
-
-      expect(spy).toBeCalledWith(ref.current, null);
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(ref.current).not.toBe(null);
+    describe('mergeRef', () => {
+        it('merges two refs', () => {
+            const spy1 = jest.fn();
+            const ref1 = createCallbackRef<HTMLDivElement>(spy1);
+            const spy2 = jest.fn();
+            const ref2 = createCallbackRef<HTMLDivElement>(spy2);
+            const ref3 = createRef() as React.MutableRefObject<any>;
+            const ref4 = jest.fn();
+
+            const TestComponent = () => <div ref={mergeRefs([ref1, ref2, ref3, ref4])}>test</div>;
+
+            render(<TestComponent/>);
+
+            const ref = ref1.current;
+            expect(ref).not.toBe(null);
+
+            expect(spy1).toBeCalledWith(ref, null);
+            expect(spy2).toBeCalledWith(ref, null);
+            // expect(ref3.current).toBe(ref);
+            expect(ref4).toBeCalledWith(ref);
+        });
+
+        it('ref equal', () => {
+            const spy = jest.fn();
+            const ref = createRef<HTMLDivElement>();
+            let counter = 0;
+
+            const Test = (_props:any) => {
+                const x = counter++;
+                const mref = mergeRefs<HTMLDivElement>([spy, ref]);
+
+                return (
+                    <div key={x < 1 ? '1' : '2'} ref={mref}>
+                        test
+                    </div>
+                );
+            };
+
+            const {rerender} = render(<Test/>);
+            expect(spy).not.toBeCalledWith(null);
+            expect(spy).toBeCalledWith(ref.current);
+            expect(spy).toHaveBeenCalledTimes(1);
+
+            rerender(<Test x={42}/>);
+            expect(spy).toBeCalledWith(null);
+            expect(spy).toBeCalledWith(ref.current);
+            expect(spy).toHaveBeenCalledTimes(3);
+        });
     });
 
-    it('shall work as useRef', () => {
-      const spy1 = jest.fn();
-      const spy2 = jest.fn();
-      let counter = 0;
-
-      const Test = () => {
-        const x = counter++;
-        const ref = useCallbackRef<HTMLDivElement>(null, () => spy1(x));
-        const mref = useMergeRefs([ref, spy2]);
-
-        return (
-          <div key={x < 2 ? '1' : '2'} ref={mref}>
-            test
-          </div>
-        );
-      };
-
-      const wrapper = mount(<Test />);
-      expect(spy1).toBeCalledWith(0);
-      expect(spy1).toHaveBeenCalledTimes(1);
-      expect(spy2).not.toBeCalledWith(null);
-      expect(spy2).toHaveBeenCalledTimes(1);
-
-      wrapper.setProps({ x: 42 });
-      expect(spy1).toBeCalledWith(0);
-      expect(spy1).toHaveBeenCalledTimes(1);
-      expect(spy2).not.toBeCalledWith(null);
-
-      wrapper.setProps({ x: 24 });
-      expect(spy1).toBeCalledWith(2);
-      expect(spy1).toHaveBeenCalledTimes(3);
-      expect(spy2).toBeCalledWith(null);
-    });
-  });
+    describe('transformRef', () => {
+        it('composite case', () => {
+            const spy1 = jest.fn();
+            const spy2 = jest.fn();
+            const spy4 = jest.fn();
 
-  describe('mergeRef', () => {
-    it('merges two refs', () => {
-      const spy1 = jest.fn();
-      const ref1 = createCallbackRef<HTMLDivElement>(spy1);
-      const spy2 = jest.fn();
-      const ref2 = createCallbackRef<HTMLDivElement>(spy2);
-      const ref3 = createRef() as React.MutableRefObject<any>;
-      const ref4 = jest.fn();
+            const ref1 = createCallbackRef<HTMLDivElement>(spy1);
+            const ref4t = createRef<HTMLDivElement>();
 
-      const TestComponent = () => <div ref={mergeRefs([ref1, ref2, ref3, ref4])}>test</div>;
+            const TestComponent = (_props:any) => {
+                const ref2 = createCallbackRef<string>(spy2);
+                const ref3 = useTransformRef<HTMLDivElement, string>(ref2, (current) => current ? current!.innerHTML : 'empty');
+                const ref4 = refToCallback<HTMLDivElement>(spy4);
+                const ref4s = useRefToCallback<HTMLDivElement>(ref4t);
 
-      mount(<TestComponent />);
+                return <div ref={useMergeRefs([ref1, ref3, ref4, ref4s])}>test</div>;
+            };
 
-      const ref = ref1.current;
-      expect(ref).not.toBe(null);
+            const {rerender} = render(<TestComponent />)
+            rerender(<TestComponent x={1}/>);
 
-      expect(spy1).toBeCalledWith(ref, null);
-      expect(spy2).toBeCalledWith(ref, null);
-      // expect(ref3.current).toBe(ref);
-      expect(ref4).toBeCalledWith(ref);
-    });
+            const ref = ref1.current;
+            expect(ref).not.toBe(null);
 
-    it('ref equal', () => {
-      const spy = jest.fn();
-      const ref = createRef<HTMLDivElement>();
-      let counter = 0;
-
-      const Test = () => {
-        const x = counter++;
-        const mref = mergeRefs<HTMLDivElement>([spy, ref]);
-
-        return (
-          <div key={x < 1 ? '1' : '2'} ref={mref}>
-            test
-          </div>
-        );
-      };
-
-      const wrapper = mount(<Test />);
-      expect(spy).not.toBeCalledWith(null);
-      expect(spy).toBeCalledWith(ref.current);
-      expect(spy).toHaveBeenCalledTimes(1);
-
-      wrapper.setProps({ x: 42 });
-      expect(spy).toBeCalledWith(null);
-      expect(spy).toBeCalledWith(ref.current);
-      expect(spy).toHaveBeenCalledTimes(3);
+            expect(spy1).toBeCalledWith(ref, null);
+            expect(spy2).toBeCalledWith('test', null);
+            expect(ref4t.current).toBe(ref);
+            expect(spy4).toBeCalledWith(ref);
+        });
     });
-  });
-
-  describe('transformRef', () => {
-    it('composite case', () => {
-      const spy1 = jest.fn();
-      const spy2 = jest.fn();
-      const spy4 = jest.fn();
 
-      const ref1 = createCallbackRef<HTMLDivElement>(spy1);
-      const ref4t = createRef<HTMLDivElement>();
+    describe('edge cases', () => {
+        it('null provided to useRefToCallback', () => {
+            expect(() => useRefToCallback(null)).not.toThrow();
+            expect(useRefToCallback(null)).toBe(useRefToCallback(null));
+            expect(() => useRefToCallback(null)(null)).not.toThrow();
+        });
 
-      const TestComponent = () => {
-        const ref2 = createCallbackRef<string>(spy2);
-        const ref3 = useTransformRef<HTMLDivElement, string>(ref2, (current) => current!.innerHTML);
-        const ref4 = refToCallback<HTMLDivElement>(spy4);
-        const ref4s = useRefToCallback<HTMLDivElement>(ref4t);
+        it('merging null refs', () => {
+            const ref1 = createRef();
 
-        return <div ref={useMergeRefs([ref1, ref3, ref4, ref4s])}>test</div>;
-      };
+            const TestComponent = () => {
+                const ref = useMergeRefs([null, ref1]);
+                ref.current = 'xx';
 
-      mount(<TestComponent />)
-        .setProps({ x: 1 })
-        .update();
+                return null;
+            };
 
-      const ref = ref1.current;
-      expect(ref).not.toBe(null);
-
-      expect(spy1).toBeCalledWith(ref, null);
-      expect(spy2).toBeCalledWith('test', null);
-      expect(ref4t.current).toBe(ref);
-      expect(spy4).toBeCalledWith(ref);
-    });
-  });
-
-  describe('edge cases', () => {
-    it('null provided to useRefToCallback', () => {
-      expect(() => useRefToCallback(null)).not.toThrow();
-      expect(useRefToCallback(null)).toBe(useRefToCallback(null));
-      expect(() => useRefToCallback(null)(null)).not.toThrow();
-    });
-
-    it('merging null refs', () => {
-      const ref1 = createRef();
-
-      const TestComponent = () => {
-        const ref = useMergeRefs([null, ref1]);
-        ref.current = 'xx';
-
-        return null;
-      };
-
-      mount(<TestComponent />);
-      expect(ref1.current).toBe('xx');
-    });
+            render(<TestComponent/>);
+            expect(ref1.current).toBe('xx');
+        });
 
-    it('updating refs on the fly', () => {
-      const ref1 = createRef();
-      const ref2 = createRef();
+        it('updating refs on the fly', () => {
+            const ref1 = createRef();
+            const ref2 = createRef();
 
-      const TestComponent = ({ r }: { r: React.RefObject<any> }) => {
-        const ref = useMergeRefs([null, r]);
-        ref.current = 'xx';
+            const TestComponent = ({r}: { r: React.RefObject<any> }) => {
+                const ref = useMergeRefs([null, r]);
+                ref.current = 'xx';
 
-        return null;
-      };
+                return null;
+            };
 
-      const wrapper = mount(<TestComponent r={ref1} />);
-      expect(ref1.current).toBe('xx');
+            const {rerender} = render(<TestComponent r={ref1}/>);
+            expect(ref1.current).toBe('xx');
 
-      wrapper.setProps({ r: ref2 });
-      expect(ref1.current).toBe(null);
-      expect(ref2.current).toBe('xx');
+            rerender(<TestComponent r={ref2}/>);
+            expect(ref1.current).toBe(null);
+            expect(ref2.current).toBe('xx');
+        });
     });
-  });
 });