fix(useLifecycleLogger): rework hook and improve tests coverage

jest.config.js

@@ -36,6 +36,7 @@ module.exports = {
       },
     },
   ],
-  coverageDirectory: './coverage',
   collectCoverage: false,
+  coverageDirectory: './coverage',
+  collectCoverageFrom: ['./src/**/*.{ts,js,tsx,jsx}', '!**/__tests__/**', '!**/__docs__/**'],
 };

src/useAsync/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Side-effect/useAsync" component={Example} />
 

src/useAsyncAbortable/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Side-effect/useAsyncAbortable" component={Example} />
 

src/useClickOutside/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="DOM/useClickOutside" component={Example} />
 

src/useConditionalEffect/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Lifecycle/useConditionalEffect" component={Example} />
 

src/useControlledRerenderState/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="State/useControlledRerenderState" component={Example} />
 

src/useCounter/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="State/useCounter" component={Example} />
 

src/useCustomCompareEffect/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Lifecycle/useCustomCompareEffect" component={Example} />
 

src/useDebouncedCallback/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Callback/useDebouncedCallback" component={Example} />
 

src/useDebouncedEffect/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Lifecycle/useDebouncedEffect" component={Example} />
 

src/useDebouncedState/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="State/useDebouncedState" component={Example} />
 

src/useDeepCompareEffect/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Lifecycle/useDeepCompareEffect" component={Example} />
 

src/useDocumentTitle/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Dom/useDocumentTitle" component={Example} />
 

src/useEventListener/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Dom/useEventListener" component={Example} />
 

src/useFirstMountState/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, Typeset } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Lifecycle/useFirstMountState" component={Example} />
 

src/useHookableRef/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Miscellaneous/useHookableRef" component={Example} />
 

src/useHookableRef/__tests__/dom.ts

@@ -44,4 +44,12 @@ describe('useHookableRef', () => {
     expect(getter).toHaveBeenCalledTimes(2);
     expect(setter).toHaveBeenCalledTimes(1);
   });
+
+  it('should work properly without getter and setter', () => {
+    const { result } = renderHook(() => useHookableRef(123));
+    expect(result.current.current).toBe(123);
+
+    result.current.current = 321;
+    expect(result.current.current).toBe(321);
+  });
 });

src/useIntersectionObserver/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Sensor/useIntersectionObserver" component={Example} />
 

src/useIntervalEffect/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Lifecycle/useIntervalEffect" component={Example} />
 

src/useIsMounted/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Lifecycle/useIsMounted" component={Example} />
 

src/useKeyboardEvent/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="DOM/useKeyboardEvent" component={Example} />
 

src/useLifecycleLogger/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Lifecycle/useLifecycleLogger" component={Example} />
 

src/useLifecycleLogger/__tests__/dom.ts

@@ -1,30 +1,45 @@
-/* eslint-disable no-console */
 import { renderHook } from '@testing-library/react-hooks/dom';
-import { useLifecycleLogger } from '../useLifecycleLogger';
+import { useLifecycleLogger } from '../..';
 
 describe('useLifecycleLogger', () => {
-  const originalLog = console.log; // save original console.log function
-  beforeEach(() => {
-    console.log = jest.fn(); // create a new mock function for each test
+  let logSpy: jest.SpyInstance;
+
+  beforeAll(() => {
+    logSpy = jest.spyOn(console, 'log');
   });
+
   afterAll(() => {
-    console.log = originalLog; // restore original console.log after all tests
+    logSpy.mockRestore();
   });
-  it('should return TestComponent mounted on first render', () => {
-    const dep = 'test';
-    renderHook(() => useLifecycleLogger('TestComponent', [dep]));
-    expect(console.log).toBeCalledWith('TestComponent mounted', { '0': 'test' });
+
+  beforeEach(() => {
+    logSpy.mockReset();
   });
 
-  it('should return `TestComponent updated` on second and next renders', () => {
-    const { rerender } = renderHook(() => useLifecycleLogger('TestComponent'));
+  it('should log whole component lifecycle', () => {
+    const { unmount, rerender } = renderHook(
+      ({ deps }) => {
+        useLifecycleLogger('TestComponent', deps);
+      },
+      { initialProps: { deps: [1, 2, 3] } }
+    );
+
+    expect(logSpy).toBeCalledTimes(1);
+    expect(logSpy).toBeCalledWith(`TestComponent mounted`, [1, 2, 3]);
+
+    rerender({ deps: [3, 2, 1] });
+
+    expect(logSpy).toBeCalledTimes(2);
+    expect(logSpy).toBeCalledWith(`TestComponent updated`, [3, 2, 1]);
+
+    rerender({ deps: [1, 5, 6] });
 
-    expect(console.log).toBeCalledWith('TestComponent mounted', {});
+    expect(logSpy).toBeCalledTimes(3);
+    expect(logSpy).toBeCalledWith(`TestComponent updated`, [1, 5, 6]);
 
-    rerender();
-    expect(console.log).toBeCalledWith('TestComponent updated', {});
+    unmount();
 
-    rerender();
-    expect(console.log).toBeCalledWith('TestComponent updated', {});
+    expect(logSpy).toBeCalledTimes(4);
+    expect(logSpy).toBeCalledWith(`TestComponent unmounted`);
   });
 });

src/useLifecycleLogger/__tests__/ssr.ts

@@ -1,12 +1,13 @@
 import { renderHook } from '@testing-library/react-hooks/server';
-import { useLifecycleLogger } from '../useLifecycleLogger';
+import { useLifecycleLogger } from '../..';
 
 describe('useLifecycleLogger', () => {
   it('should be defined', () => {
     expect(useLifecycleLogger).toBeDefined();
   });
+
   it('should render', () => {
-    const { result } = renderHook(() => useLifecycleLogger('TestComponent', []));
+    const { result } = renderHook(() => useLifecycleLogger('TestComponent'));
     expect(result.error).toBeUndefined();
   });
 });

src/useLifecycleLogger/useLifecycleLogger.ts

@@ -1,6 +1,5 @@
 /* eslint-disable no-console */
-import { DependencyList } from 'react';
-import { useUpdateEffect, useMountEffect } from '..';
+import { DependencyList, useEffect, useRef } from 'react';
 
 /**
  * This hook provides a console log when the component mounts, updates and unmounts.
@@ -9,12 +8,23 @@ import { useUpdateEffect, useMountEffect } from '..';
  * @param deps Dependencies list, as for `useEffect` hook
  */
 export function useLifecycleLogger(componentName: string, deps?: DependencyList): void {
-  useMountEffect(() => {
-    console.log(`${componentName} mounted`, { ...deps });
-    return () => console.log(`${componentName} unmounted`);
-  });
+  const mountedRef = useRef(false);
 
-  useUpdateEffect(() => {
-    console.log(`${componentName} updated`, { ...deps });
+  useEffect(() => {
+    if (mountedRef.current) {
+      console.log(`${componentName} updated`, deps && [...deps]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    console.log(`${componentName} mounted`, deps && [...deps]);
+
+    return () => {
+      mountedRef.current = false;
+      console.log(`${componentName} unmounted`);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 }

src/useList/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="State/useList" component={Example} />
 

src/useLocalStorageValue/__docs__/story.mdx

@@ -1,5 +1,5 @@
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta title="Side-effect/useLocalStorageValue" component={Example} />

src/useMap/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="State/useMap" component={Example} />
 

src/useMeasure/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Sensor/useMeasure" />
 

src/useMediaQuery/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Sensor/useMediaQuery" component={Example} />
 

src/useMediatedState/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="State/useMediatedState" component={Example} />
 

src/useMountEffect/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Lifecycle/useMountEffect" component={Example} />
 

src/useNetworkState/__docs__/story.mdx

@@ -1,5 +1,5 @@
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta title={'Navigator/useNetworkState'} component={Example} />

src/usePermission/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Navigator/usePermission" component={Example} />
 

src/usePrevious/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="State/usePrevious" component={Example} />
 

src/usePreviousDistinct/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="State/usePreviousDistinct" component={Example} />
 

src/useRafCallback/__docs__/story.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Example } from './example.stories';
-import { ImportPath } from '../../storybookUtil/ImportPath';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Callback/useRafCallback" component={Example} />