fix: make all tests work again

Author: devrnt

test/useWizard.test.tsx

@@ -1,23 +1,20 @@
-import { waitFor } from '@testing-library/react';
 import { act, renderHook } from '@testing-library/react-hooks';
 import * as React from 'react';
 
 import { useWizard, Wizard } from '../src';
 
 // Common render use wizard hook
-const renderUseWizardHook = () => {
+const renderUseWizardHook = (initialStartIndex = 0) => {
   return renderHook(() => useWizard(), {
-    wrapper: ({ children }: { children: React.ReactNode }) => {
-      return <Wizard>{children}</Wizard>;
-    },
     initialProps: {
-      children: (
-        <>
-          <p>step 1</p>
-          <p>step 2</p>
-        </>
-      ),
+      startIndex: initialStartIndex,
     },
+    wrapper: ({ children, startIndex }) => (
+      <Wizard startIndex={startIndex}>
+        <p>step 1 {children}</p>
+        <p>step 2 {children}</p>
+      </Wizard>
+    ),
   });
 };
 
@@ -34,150 +31,128 @@ describe('useWizard', () => {
     expect(result.current.activeStep).toBe(0);
   });
 
+  test('should set active step to one', () => {
+    const { result } = renderUseWizardHook(1);
+
+    expect(result.current.activeStep).toBe(1);
+  });
+
   test('should be first step', () => {
     const { result } = renderUseWizardHook();
 
     expect(result.current.isFirstStep).toBe(true);
   });
 
-  test('should be second step after next step', () => {
-    const { result } = renderUseWizardHook();
+  test('should be second step after next step', async () => {
+    const { result, waitForNextUpdate } = renderUseWizardHook();
 
+    // According to https://react-hooks-testing-library.com/usage/advanced-hooks#async it's
+    // not necessary to wrap this call in `act`, however this doesn't seem to be the case
     act(() => {
       result.current.nextStep();
     });
 
-    // Wait for an element to appear
-    waitFor(() => {
-      expect(result.current.isFirstStep).toBe(false);
-      expect(result.current.isLastStep).toBe(true);
-    });
+    await waitForNextUpdate();
+
+    expect(result.current.isFirstStep).toBe(false);
+    expect(result.current.isLastStep).toBe(true);
   });
 
-  test('should call callback on next step', () => {
+  test('should invoke `handleStep` handler on next step', async () => {
     const callback = jest.fn();
 
-    const { result } = renderUseWizardHook();
+    const { result, waitForNextUpdate } = renderUseWizardHook();
 
     act(() => {
       result.current.handleStep(callback);
-    });
-
-    // Wait for an element to appear
-    waitFor(() => {
       result.current.nextStep();
-      expect(callback).toBeCalled();
     });
+
+    await waitForNextUpdate();
+
+    expect(callback).toBeCalled();
   });
 
-  test('should set active step to one on next step', () => {
-    const { result } = renderUseWizardHook();
+  test('should set active step to one on next step', async () => {
+    const { result, waitForNextUpdate } = renderUseWizardHook();
 
-    // Wait for an element to appear
-    waitFor(() => {
+    act(() => {
       result.current.nextStep();
-      expect(result.current.activeStep).toBe(1);
     });
+
+    await waitForNextUpdate();
+
+    expect(result.current.activeStep).toBe(1);
   });
 
-  test('should set is last stap on next step', () => {
-    const { result } = renderUseWizardHook();
+  test('should set `isLastStap` on next step', async () => {
+    const { result, waitForNextUpdate } = renderUseWizardHook();
 
     // Wait for an element to appear
-    waitFor(() => {
+    act(() => {
       result.current.nextStep();
-      expect(result.current.isFirstStep).toBe(false);
-      expect(result.current.isLastStep).toBe(true);
     });
+
+    await waitForNextUpdate();
+
+    expect(result.current.isFirstStep).toBe(false);
+    expect(result.current.isLastStep).toBe(true);
   });
 
-  test('should go to passed step index on next step', () => {
-    const { result } = renderHook(() => useWizard(), {
-      wrapper: ({ children }: { children: React.ReactNode }) => {
-        return <Wizard>{children}</Wizard>;
-      },
-      initialProps: {
-        children: (
-          <>
-            <p>step 1</p>
-            <p>step 2</p>
-            <p>step 3</p>
-          </>
-        ),
-      },
+  test('should go to passed step index on next step', async () => {
+    const { result, waitForNextUpdate } = renderHook(() => useWizard(), {
+      wrapper: ({ children }) => (
+        <Wizard>
+          <p>step 1 {children}</p>
+          <p>step 2 {children}</p>
+          <p>step 3 {children}</p>
+        </Wizard>
+      ),
     });
-    // Wait for an element to appear
-    waitFor(() => {
+
+    act(() => {
       result.current.nextStep(2);
-      expect(result.current.isFirstStep).toBe(false);
-      expect(result.current.isLastStep).toBe(true);
     });
+
+    await waitForNextUpdate();
+
+    expect(result.current.isFirstStep).toBe(false);
+    expect(result.current.isLastStep).toBe(true);
   });
 
-  test('should go to passed step index on next step with handler', () => {
+  test('should go to passed step index on next step with handler', async () => {
     const callback = jest.fn();
 
-    const { result } = renderHook(() => useWizard(), {
-      wrapper: ({ children }: { children: React.ReactNode }) => {
-        return <Wizard>{children}</Wizard>;
-      },
-      initialProps: {
-        children: (
-          <>
-            <p>step 1</p>
-            <p>step 2</p>
-            <p>step 3</p>
-          </>
-        ),
-      },
+    const { result, waitForNextUpdate } = renderHook(() => useWizard(), {
+      wrapper: ({ children }) => (
+        <Wizard>
+          <p>step 1 {children}</p>
+          <p>step 2 {children}</p>
+          <p>step 3 {children}</p>
+        </Wizard>
+      ),
     });
 
     act(() => {
       result.current.handleStep(callback);
-    });
-    // Wait for an element to appear
-    waitFor(() => {
       result.current.nextStep(2);
-      expect(result.current.isFirstStep).toBe(false);
-      expect(result.current.isLastStep).toBe(true);
-      expect(callback).toBeCalled();
     });
-  });
 
-  test('should go to passed step index on previous step', () => {
-    const { result } = renderHook(() => useWizard(), {
-      wrapper: ({ children }: { children: React.ReactNode }) => {
-        return <Wizard>{children}</Wizard>;
-      },
-      initialProps: {
-        children: (
-          <>
-            <p>step 1</p>
-            <p>step 2</p>
-            <p>step 3</p>
-          </>
-        ),
-      },
-    });
-    // Wait for an element to appear
-    waitFor(() => {
-      result.current.previousStep(2);
-      expect(result.current.isFirstStep).toBe(false);
-      expect(result.current.isLastStep).toBe(true);
-    });
+    await waitForNextUpdate();
+
+    expect(result.current.isFirstStep).toBe(false);
+    expect(result.current.isLastStep).toBe(true);
+    expect(callback).toBeCalled();
   });
 
-  test('should not go to previous step if first step', () => {
+  test('should not go to previous step if first step', async () => {
     const { result } = renderUseWizardHook();
 
     act(() => {
       result.current.previousStep();
     });
 
     // Wait for an element to appear
-    waitFor(() => {
-      result.current.nextStep();
-      expect(result.current.activeStep).toBe(0);
-    });
+    expect(result.current.activeStep).toBe(0);
   });
 });