Merge pull request #20 from hlysine/develop

example/src/App.tsx

@@ -10,13 +10,14 @@ const Watcher = makeReactive(function Watcher() {
     setState(obj.a);
     return () => console.log('cleanup useWatchEffect');
   });
-  console.log('render App');
+  console.log('render Watcher');
 
   return <button onClick={() => obj.a++}>Test update inside watcher</button>;
 });
 
 export default makeReactive(function App() {
   const [show, setShow] = useState(true);
+  console.log('render App');
 
   return (
     <>

src/__tests__/component.test.tsx

@@ -1,16 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { act, render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import {
   makeReactive,
   reactive,
   ref,
   useComputed,
+  useReference,
   useWatch,
   useWatchEffect,
 } from '..';
 import { perf, wait } from 'react-performance-testing';
 import 'jest-performance-testing';
+import * as helper from '../helper';
+
+let getFiberInDev: jest.SpyInstance;
+
+beforeEach(() => {
+  // mock getFiberInDev to simulate React production mode
+  getFiberInDev = jest.spyOn(helper, 'getFiberInDev').mockReturnValue(null);
+});
+
+afterEach(() => {
+  jest.resetAllMocks();
+  jest.restoreAllMocks();
+});
 
 describe('makeReactive', () => {
   it('renders without crashing', async () => {
@@ -22,6 +36,48 @@ describe('makeReactive', () => {
     const content = await findByText('Test component');
     expect(content).toBeTruthy();
   });
+  it('renders custom hooks without crashing', async () => {
+    const count = ref(0);
+    const useCount = makeReactive(function useCount() {
+      return count.value;
+    });
+    const Tester = function Tester() {
+      const count = useCount();
+      return <p>{count}</p>;
+    };
+
+    const { findByText } = render(<Tester />);
+    const content1 = await findByText('0');
+    expect(content1).toBeTruthy();
+
+    act(() => {
+      count.value++;
+    });
+
+    const content2 = await findByText('1');
+    expect(content2).toBeTruthy();
+  });
+  it('renders custom hooks in reactive component without crashing', async () => {
+    const count = ref(0);
+    const useCount = makeReactive(function useCount() {
+      return count.value;
+    });
+    const Tester = makeReactive(function Tester() {
+      const count = useCount();
+      return <p>{count}</p>;
+    });
+
+    const { findByText } = render(<Tester />);
+    const content1 = await findByText('0');
+    expect(content1).toBeTruthy();
+
+    act(() => {
+      count.value++;
+    });
+
+    const content2 = await findByText('1');
+    expect(content2).toBeTruthy();
+  });
   it('accepts props', async () => {
     const Tester = makeReactive(function Tester({
       value,
@@ -252,7 +308,76 @@ describe('makeReactive', () => {
     expect(mockCleanup2).toBeCalledTimes(2);
     expect(mockGetter).toBeCalledTimes(2);
   });
+  it('stops reactive effects on unmount (Dev Mode)', async () => {
+    // use orginal return value to restore React development mode
+    getFiberInDev.mockRestore();
+    const count = ref(0);
+
+    const mockEffect = jest.fn();
+    const mockCleanup = jest.fn();
+    const mockEffect2 = jest.fn();
+    const mockCleanup2 = jest.fn();
+    const mockGetter = jest.fn(() => count.value + 1);
+    const Tester = makeReactive(function Tester() {
+      useWatchEffect(() => {
+        mockEffect(count.value);
+        return mockCleanup;
+      });
+      useWatch(
+        count,
+        (...args) => {
+          mockEffect2(...args);
+          return mockCleanup2;
+        },
+        { immediate: true }
+      );
+      const derived = useComputed(mockGetter);
+      return <p>{derived.value}</p>;
+    });
+
+    const { unmount, findByText } = render(<Tester />);
+
+    expect(mockEffect).toBeCalledTimes(1);
+    expect(mockCleanup).toBeCalledTimes(0);
+    expect(mockEffect2).toBeCalledTimes(1);
+    expect(mockCleanup2).toBeCalledTimes(0);
+    expect(mockGetter).toBeCalledTimes(2);
+    const content1 = await findByText('1');
+    expect(content1).toBeTruthy();
+
+    act(() => {
+      count.value++;
+    });
+
+    expect(mockEffect).toBeCalledTimes(2);
+    expect(mockCleanup).toBeCalledTimes(1);
+    expect(mockEffect2).toBeCalledTimes(2);
+    expect(mockCleanup2).toBeCalledTimes(1);
+    expect(mockGetter).toBeCalledTimes(3);
+    const content2 = await findByText('2');
+    expect(content2).toBeTruthy();
+
+    unmount();
+
+    expect(mockEffect).toBeCalledTimes(2);
+    expect(mockCleanup).toBeCalledTimes(2);
+    expect(mockEffect2).toBeCalledTimes(2);
+    expect(mockCleanup2).toBeCalledTimes(2);
+    expect(mockGetter).toBeCalledTimes(3);
+
+    act(() => {
+      count.value++;
+    });
+
+    expect(mockEffect).toBeCalledTimes(2);
+    expect(mockCleanup).toBeCalledTimes(2);
+    expect(mockEffect2).toBeCalledTimes(2);
+    expect(mockCleanup2).toBeCalledTimes(2);
+    expect(mockGetter).toBeCalledTimes(3);
+  });
   it('stops reactive effects on unmount (Strict Mode)', async () => {
+    // use orginal return value to restore React development mode
+    getFiberInDev.mockRestore();
     const count = ref(0);
 
     const mockEffect = jest.fn();
@@ -283,10 +408,10 @@ describe('makeReactive', () => {
       </React.StrictMode>
     );
 
-    expect(mockEffect).toBeCalledTimes(3);
-    expect(mockCleanup).toBeCalledTimes(2);
-    expect(mockEffect2).toBeCalledTimes(3);
-    expect(mockCleanup2).toBeCalledTimes(2);
+    expect(mockEffect).toBeCalledTimes(2);
+    expect(mockCleanup).toBeCalledTimes(1);
+    expect(mockEffect2).toBeCalledTimes(2);
+    expect(mockCleanup2).toBeCalledTimes(1);
     expect(mockGetter).toBeCalledTimes(3);
     const content1 = await findByText('1');
     expect(content1).toBeTruthy();
@@ -295,30 +420,59 @@ describe('makeReactive', () => {
       count.value++;
     });
 
-    expect(mockEffect).toBeCalledTimes(4);
-    expect(mockCleanup).toBeCalledTimes(3);
-    expect(mockEffect2).toBeCalledTimes(4);
-    expect(mockCleanup2).toBeCalledTimes(3);
+    expect(mockEffect).toBeCalledTimes(3);
+    expect(mockCleanup).toBeCalledTimes(2);
+    expect(mockEffect2).toBeCalledTimes(3);
+    expect(mockCleanup2).toBeCalledTimes(2);
     expect(mockGetter).toBeCalledTimes(4);
     const content2 = await findByText('2');
     expect(content2).toBeTruthy();
 
     unmount();
 
-    expect(mockEffect).toBeCalledTimes(4);
-    expect(mockCleanup).toBeCalledTimes(4);
-    expect(mockEffect2).toBeCalledTimes(4);
-    expect(mockCleanup2).toBeCalledTimes(4);
+    expect(mockEffect).toBeCalledTimes(3);
+    expect(mockCleanup).toBeCalledTimes(3);
+    expect(mockEffect2).toBeCalledTimes(3);
+    expect(mockCleanup2).toBeCalledTimes(3);
     expect(mockGetter).toBeCalledTimes(4);
 
     act(() => {
       count.value++;
     });
 
-    expect(mockEffect).toBeCalledTimes(4);
-    expect(mockCleanup).toBeCalledTimes(4);
-    expect(mockEffect2).toBeCalledTimes(4);
-    expect(mockCleanup2).toBeCalledTimes(4);
+    expect(mockEffect).toBeCalledTimes(3);
+    expect(mockCleanup).toBeCalledTimes(3);
+    expect(mockEffect2).toBeCalledTimes(3);
+    expect(mockCleanup2).toBeCalledTimes(3);
     expect(mockGetter).toBeCalledTimes(4);
   });
+  it('does not trigger infinite re-renders', async () => {
+    // use orginal return value to restore React development mode
+    getFiberInDev.mockRestore();
+
+    const Tester = makeReactive(function Tester() {
+      const [, setTick] = useState(0);
+      const count = useReference(0);
+      useWatchEffect(() => {
+        setTick((t) => t + 1);
+      });
+      useWatch(
+        count,
+        () => {
+          setTick((t) => t + 1);
+        },
+        { immediate: true }
+      );
+      return <p>{count.value}</p>;
+    });
+
+    const { findByText } = render(
+      <React.StrictMode>
+        <Tester />
+      </React.StrictMode>
+    );
+
+    const content = await findByText('0');
+    expect(content).toBeTruthy();
+  });
 });