Add test for usage in component mount.

Author: sandinmyjoints

component.jsx

@@ -0,0 +1,44 @@
+import useAsyncQueue from "./dist/use-async-queue";
+import { useState, useEffect } from "react";
+
+const makeTask = (id, delay) => {
+  return {
+    id,
+    task: () => {
+      return new Promise((resolve) =>
+        setTimeout(() => {
+          resolve(`${id} is done`);
+        }, delay)
+      );
+    },
+  };
+};
+
+export const Component = () => {
+  const [doneItems, setDoneItems] = useState([]);
+
+  const done = (d) => {
+    setDoneItems((items) => [...items, d]);
+  };
+
+  const { add, stats } = useAsyncQueue({ concurrency: 2, done });
+
+  useEffect(() => {
+    add(makeTask(1, 100));
+    add(makeTask(2, 200));
+    add(makeTask(3, 300));
+  }, [add]);
+  const { numPending, numInFlight, numDone } = stats;
+
+  return (
+    <>
+      <span>pending: {numPending}</span>
+      <span>inFlight: {numInFlight}</span>
+      <span>done: {numDone}</span>
+      <span>total: {numPending + numInFlight + numDone}</span>
+      {doneItems.map((item) => (
+        <li key={item.id}>item done - {item.id}</li>
+      ))}
+    </>
+  );
+};

use-async-queue.test.js renamed to use-async-queue.test.jsx

@@ -1,7 +1,9 @@
-import { renderHook, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { renderHook, waitFor, render, screen } from "@testing-library/react";
 import { StrictMode } from "react";
 import { act } from "react";
 import useAsyncQueue from "./dist/use-async-queue";
+import { Component } from "./component";
 
 describe("useAsyncQueue", () => {
   describe("real timers", () => {
@@ -279,13 +281,14 @@ describe("useAsyncQueue", () => {
       expect(result.current.stats.numInFlight).toBe(2);
       expect(inflight).toHaveBeenCalledTimes(2);
       expect(done).toHaveBeenCalledTimes(0);
+
       jest.advanceTimersByTime(900);
       expect(done).not.toHaveBeenCalled();
       expect(result.current.stats.numInFlight).toBe(2);
       expect(result.current.stats.numPending).toBe(0);
       expect(result.current.stats.numDone).toBe(0);
-      jest.advanceTimersByTime(100);
 
+      jest.advanceTimersByTime(100);
       await waitFor(() => {
         expect(done).toHaveBeenCalledTimes(2);
         expect(result.current.stats.numInFlight).toBe(0);
@@ -294,4 +297,25 @@ describe("useAsyncQueue", () => {
       });
     });
   });
+
+  describe("on mount", () => {
+    it("should execute each task once", async () => {
+      render(<Component />, {
+        wrapper: StrictMode,
+      });
+
+      expect(screen.getByText("total: 3"));
+      await waitFor(() => {
+        expect(screen.queryAllByText(/item done/)).toHaveLength(1);
+      });
+      await waitFor(() => {
+        expect(screen.queryAllByText(/item done/)).toHaveLength(2);
+      });
+      await waitFor(() => {
+        expect(screen.queryAllByText(/item done/)).toHaveLength(3);
+      });
+      expect(screen.queryAllByText(/item done/)).not.toHaveLength(4);
+      expect(screen.getByText("total: 3"));
+    });
+  });
 });