test: test driven

Author: zombieJ

src/Immutable.tsx

@@ -34,7 +34,13 @@ export function makeImmutable<T extends React.ComponentType<any>>(Component: T):
  * Wrapped Component with `React.memo`.
  * But will rerender when parent with `makeImmutable` rerender.
  */
-export function responseImmutable<T extends React.ComponentType<any>>(Component: T): T {
+export function responseImmutable<T extends React.ComponentType<any>>(
+  Component: T,
+  propsAreEqual?: (
+    prevProps: Readonly<React.ComponentProps<T>>,
+    nextProps: Readonly<React.ComponentProps<T>>,
+  ) => boolean,
+): T {
   const refAble = supportRef(Component);
 
   const ImmutableComponent = function (props: any, ref: any) {
@@ -51,6 +57,6 @@ export function responseImmutable<T extends React.ComponentType<any>>(Component:
   }
 
   return refAble
-    ? React.memo(React.forwardRef(ImmutableComponent))
-    : (React.memo(ImmutableComponent) as any);
+    ? React.memo(React.forwardRef(ImmutableComponent), propsAreEqual)
+    : (React.memo(ImmutableComponent, propsAreEqual) as any);
 }

tests/immutable.test.tsx

@@ -95,4 +95,27 @@ describe('Immutable', () => {
     expect(rootRef.current).toBe(container.querySelector('.root'));
     expect(rawRef.current).toBe(container.querySelector('.raw'));
   });
+
+  it('customize propsAreEqual', () => {
+    const Input: React.FC<{
+      value: string;
+      onChange: React.ChangeEventHandler<HTMLInputElement>;
+    }> = props => (
+      <>
+        <input {...props} />
+        <RenderTimer id="input" />
+      </>
+    );
+
+    const ImmutableInput = responseImmutable(Input);
+
+    const { container, rerender } = render(<ImmutableInput value="same" onChange={() => {}} />);
+    expect(container.querySelector('#input').textContent).toEqual('1');
+
+    rerender(<ImmutableInput value="same" onChange={() => {}} />);
+    expect(container.querySelector('#input').textContent).toEqual('1');
+
+    rerender(<ImmutableInput value="not-same" onChange={() => {}} />);
+    expect(container.querySelector('#input').textContent).toEqual('2');
+  });
 });