test: update test suite for function component rewrite

Migrate all tests to @testing-library/react, add IntersectionObserver
mock in setup/, and add new test files for buildRootMargin utility and
no-scrollbar behaviour.

Author: iamdarshshah

jest.config.js

@@ -119,7 +119,7 @@ module.exports = {
   // runner: "jest-runner",
 
   // The paths to modules that run some code to configure or set up the testing environment before each test
-  // setupFiles: [],
+  setupFiles: ['<rootDir>/src/__tests__/setup/intersectionObserverMock.ts'],
 
   // The path to a module that runs some code to configure or set up the testing framework before each test
   // setupTestFrameworkScriptFile: null,
@@ -143,9 +143,7 @@ module.exports = {
   // ],
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
-  // testPathIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
+  testPathIgnorePatterns: ['/node_modules/', '<rootDir>/src/__tests__/setup/'],
 
   // The regexp pattern Jest uses to detect test files
   // testRegex: "",

src/__tests__/bottom.test.tsx

@@ -1,19 +1,17 @@
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, act } from '@testing-library/react';
 import InfiniteScroll from '../index';
+import { MockIntersectionObserver } from './setup/intersectionObserverMock';
 
 describe('bottom detection triggers next', () => {
   beforeEach(() => {
-    jest.useFakeTimers();
+    MockIntersectionObserver.instances = [];
   });
 
-  afterEach(() => {
-    cleanup();
-    jest.useRealTimers();
-  });
+  afterEach(cleanup);
 
-  it('calls next when scrolled to bottom (height container)', () => {
+  it('calls next when sentinel intersects (height container)', () => {
     const next = jest.fn();
-    const { container } = render(
+    render(
       <InfiniteScroll
         dataLength={0}
         loader={'Loading...'}
@@ -26,27 +24,53 @@ describe('bottom detection triggers next', () => {
       </InfiniteScroll>
     );
 
-    const node = container.querySelector(
-      '.infinite-scroll-component'
-    ) as HTMLElement;
-
-    Object.defineProperty(node, 'clientHeight', {
-      configurable: true,
-      get: () => 100,
-    });
-    Object.defineProperty(node, 'scrollHeight', {
-      configurable: true,
-      get: () => 200,
-    });
-    Object.defineProperty(node, 'scrollTop', {
-      configurable: true,
-      get: () => 100,
+    act(() => {
+      MockIntersectionObserver.instances[0].triggerIntersect();
     });
 
-    node.dispatchEvent(new Event('scroll'));
+    expect(next).toHaveBeenCalled();
+  });
 
-    jest.advanceTimersByTime(200);
+  it('does not call next when hasMore is false', () => {
+    const next = jest.fn();
+    render(
+      <InfiniteScroll
+        dataLength={0}
+        loader={'Loading...'}
+        hasMore={false}
+        next={next}
+        height={100}
+      >
+        <div />
+      </InfiniteScroll>
+    );
 
-    expect(next).toHaveBeenCalled();
+    // No observer is created when hasMore=false (no sentinel rendered)
+    expect(MockIntersectionObserver.instances).toHaveLength(0);
+    expect(next).not.toHaveBeenCalled();
+  });
+
+  it('does not call next twice before dataLength changes', () => {
+    const next = jest.fn();
+    render(
+      <InfiniteScroll
+        dataLength={0}
+        loader={'Loading...'}
+        hasMore={true}
+        next={next}
+        height={100}
+      >
+        <div />
+      </InfiniteScroll>
+    );
+
+    const observer = MockIntersectionObserver.instances[0];
+
+    act(() => {
+      observer.triggerIntersect();
+      observer.triggerIntersect(); // second fire before dataLength changes
+    });
+
+    expect(next).toHaveBeenCalledTimes(1);
   });
 });

src/__tests__/buildRootMargin.test.ts

@@ -0,0 +1,53 @@
+import { buildRootMargin } from '../utils/buildRootMargin';
+
+describe('buildRootMargin', () => {
+  let warnSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    warnSpy.mockRestore();
+  });
+
+  describe('normal (non-inverse) mode', () => {
+    it('converts default number threshold (0.8) to bottom margin', () => {
+      expect(buildRootMargin(0.8, false)).toBe('0px 0px 20% 0px');
+    });
+
+    it('converts 0.5 number threshold', () => {
+      expect(buildRootMargin(0.5, false)).toBe('0px 0px 50% 0px');
+    });
+
+    it('converts 1.0 number threshold (trigger at 100%)', () => {
+      expect(buildRootMargin(1.0, false)).toBe('0px 0px 0% 0px');
+    });
+
+    it('converts percent string threshold', () => {
+      expect(buildRootMargin('80%', false)).toBe('0px 0px 20% 0px');
+    });
+
+    it('converts pixel string threshold', () => {
+      expect(buildRootMargin('120px', false)).toBe('0px 0px 120px 0px');
+    });
+
+    it('converts 0px threshold', () => {
+      expect(buildRootMargin('0px', false)).toBe('0px 0px 0px 0px');
+    });
+  });
+
+  describe('inverse mode', () => {
+    it('converts default number threshold (0.8) to top margin', () => {
+      expect(buildRootMargin(0.8, true)).toBe('20% 0px 0px 0px');
+    });
+
+    it('converts pixel string threshold to top margin', () => {
+      expect(buildRootMargin('120px', true)).toBe('120px 0px 0px 0px');
+    });
+
+    it('converts percent string threshold to top margin', () => {
+      expect(buildRootMargin('50%', true)).toBe('50% 0px 0px 0px');
+    });
+  });
+});

src/__tests__/hasChildren.test.tsx

@@ -1,7 +1,12 @@
 import { render, cleanup } from '@testing-library/react';
 import InfiniteScroll from '../index';
+import { MockIntersectionObserver } from './setup/intersectionObserverMock';
 
 describe('hasChildren logic and loader visibility', () => {
+  beforeEach(() => {
+    MockIntersectionObserver.instances = [];
+  });
+
   afterEach(cleanup);
 
   it('shows loader when hasMore and no children', () => {
@@ -20,6 +25,8 @@ describe('hasChildren logic and loader visibility', () => {
   });
 
   it('does not show loader when hasChildren=true and non-array child', () => {
+    // With IO the loader is only shown synchronously when there are no children.
+    // hasChildren=true suppresses the immediate loader render — IO must fire first.
     const { queryByText } = render(
       <InfiniteScroll
         dataLength={1}
@@ -32,6 +39,7 @@ describe('hasChildren logic and loader visibility', () => {
         <div>child</div>
       </InfiniteScroll>
     );
+    // IO has not fired yet, so showLoader=false AND hasChildren=true suppresses the immediate render
     expect(queryByText('Loading...')).toBeNull();
   });
 });

src/__tests__/index.test.tsx

@@ -1,9 +1,14 @@
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, act } from '@testing-library/react';
 import InfiniteScroll from '../index';
+import { MockIntersectionObserver } from './setup/intersectionObserverMock';
 
 describe('React Infinite Scroll Component', () => {
   const originalConsoleError = console.error;
 
+  beforeEach(() => {
+    MockIntersectionObserver.instances = [];
+  });
+
   afterEach(() => {
     cleanup();
     console.error = originalConsoleError;
@@ -82,6 +87,7 @@ describe('React Infinite Scroll Component', () => {
     expect(setTimeoutSpy).toHaveBeenCalled();
     expect(onScrollMock).toHaveBeenCalled();
     setTimeoutSpy.mockRestore();
+    jest.useRealTimers();
   });
 
   describe('When missing the dataLength prop', () => {
@@ -101,7 +107,7 @@ describe('React Infinite Scroll Component', () => {
 
   describe('When user scrolls to the bottom', () => {
     it('does not show loader if hasMore is false', () => {
-      const { container, queryByText } = render(
+      const { queryByText } = render(
         <InfiniteScroll
           dataLength={4}
           loader={'Loading...'}
@@ -112,17 +118,12 @@ describe('React Infinite Scroll Component', () => {
           <div />
         </InfiniteScroll>
       );
-
-      const scrollEvent = new Event('scroll');
-      const node = container.querySelector(
-        '.infinite-scroll-component'
-      ) as HTMLElement;
-      node.dispatchEvent(scrollEvent);
+      // No IO observer created, loader never shown
       expect(queryByText('Loading...')).toBeFalsy();
     });
 
-    it('shows loader if hasMore is true', () => {
-      const { container, getByText } = render(
+    it('shows loader if hasMore is true after IO fires', () => {
+      const { getByText } = render(
         <InfiniteScroll
           dataLength={4}
           loader={'Loading...'}
@@ -135,11 +136,10 @@ describe('React Infinite Scroll Component', () => {
         </InfiniteScroll>
       );
 
-      const scrollEvent = new Event('scroll');
-      const node = container.querySelector(
-        '.infinite-scroll-component'
-      ) as HTMLElement;
-      node.dispatchEvent(scrollEvent);
+      act(() => {
+        MockIntersectionObserver.instances[0].triggerIntersect();
+      });
+
       expect(getByText('Loading...')).toBeTruthy();
     });
   });

src/__tests__/inverse.test.tsx

@@ -1,16 +1,17 @@
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, act } from '@testing-library/react';
 import InfiniteScroll from '../index';
+import { MockIntersectionObserver } from './setup/intersectionObserverMock';
 
 describe('inverse mode triggers next near top', () => {
-  beforeEach(() => jest.useFakeTimers());
-  afterEach(() => {
-    cleanup();
-    jest.useRealTimers();
+  beforeEach(() => {
+    MockIntersectionObserver.instances = [];
   });
 
-  it('calls next when at top (inverse)', () => {
+  afterEach(cleanup);
+
+  it('calls next when sentinel intersects in inverse mode', () => {
     const next = jest.fn();
-    const { container } = render(
+    render(
       <InfiniteScroll
         dataLength={10}
         loader={'Loading...'}
@@ -24,27 +25,30 @@ describe('inverse mode triggers next near top', () => {
       </InfiniteScroll>
     );
 
-    const node = container.querySelector(
-      '.infinite-scroll-component'
-    ) as HTMLElement;
-
-    Object.defineProperty(node, 'clientHeight', {
-      configurable: true,
-      get: () => 100,
-    });
-    Object.defineProperty(node, 'scrollHeight', {
-      configurable: true,
-      get: () => 1000,
-    });
-    Object.defineProperty(node, 'scrollTop', {
-      configurable: true,
-      get: () => 0,
+    act(() => {
+      MockIntersectionObserver.instances[0].triggerIntersect();
     });
 
-    node.dispatchEvent(new Event('scroll'));
+    expect(next).toHaveBeenCalled();
+  });
 
-    jest.advanceTimersByTime(200);
+  it('applies top rootMargin in inverse mode', () => {
+    const next = jest.fn();
+    render(
+      <InfiniteScroll
+        dataLength={5}
+        loader={'Loading...'}
+        hasMore={true}
+        next={next}
+        inverse
+        scrollThreshold={0.8}
+      >
+        <div />
+      </InfiniteScroll>
+    );
 
-    expect(next).toHaveBeenCalled();
+    const { options } = MockIntersectionObserver.instances[0];
+    // inverse mode: margin applies to top, so rootMargin starts with a non-zero value
+    expect(options.rootMargin).toBe('20% 0px 0px 0px');
   });
 });