Merge pull request #84 from FusionAuth/83-correct-component-tests-usa…

…ge-of-testing-library-and-async

fixes usage of `waitFor` to render component tests

src/__tests__/FusionAuthLoginButton.test.tsx

@@ -1,38 +1,23 @@
 import React from 'react';
-import { screen, render, fireEvent, waitFor } from '@testing-library/react';
+import { screen, render, fireEvent } from '@testing-library/react';
 import { FusionAuthLoginButton } from '../components/FusionAuthLoginButton';
 import { FusionAuthProvider } from '../providers/FusionAuthProvider';
 import { mockUseFusionAuth } from './mocks/mockUseFusionAuth';
 import { TEST_CONFIG } from './mocks/testConfig';
 
 describe('FusionAuthLoginButton', () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    test('Login buttons renders the correct text', async () => {
-        await renderProvider();
-        expect(await screen.findByText('Login')).toBeInTheDocument();
-    });
-
-    test('Login button will call the useFusionAuth hook', async () => {
+    test('Login button will call the useFusionAuth hook', () => {
         const login = jest.fn();
         mockUseFusionAuth({ login });
 
-        await renderProvider();
+        const stateValue = 'state-value-for-login';
+        render(
+            <FusionAuthProvider {...TEST_CONFIG}>
+                <FusionAuthLoginButton state={stateValue} />
+            </FusionAuthProvider>,
+        );
 
         fireEvent.click(screen.getByText('Login'));
-
-        expect(login).toBeCalledWith('state');
+        expect(login).toHaveBeenCalledWith(stateValue);
     });
 });
-
-const renderProvider = () => {
-    return waitFor(() =>
-        render(
-            <FusionAuthProvider {...TEST_CONFIG}>
-                <FusionAuthLoginButton state="state" />
-            </FusionAuthProvider>,
-        ),
-    );
-};

src/__tests__/FusionAuthLogoutButton.test.tsx

@@ -1,38 +1,23 @@
 import React from 'react';
-import { screen, render, fireEvent, waitFor } from '@testing-library/react';
+import { screen, render, fireEvent } from '@testing-library/react';
 import { FusionAuthLogoutButton } from '../components/FusionAuthLogoutButton';
 import { FusionAuthProvider } from '../providers/FusionAuthProvider';
 import { mockUseFusionAuth } from './mocks/mockUseFusionAuth';
 import { TEST_CONFIG } from './mocks/testConfig';
 
 describe('FusionAuthLogoutButton', () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    test('Logout buttons renders the correct text', async () => {
-        await renderProvider();
-        expect(await screen.findByText('Logout')).toBeInTheDocument();
-    });
-
-    test('Logout button will call the useFusionAuth hook', async () => {
+    test('Logout button will call the useFusionAuth hook', () => {
         const logout = jest.fn();
         mockUseFusionAuth({ logout });
 
-        await renderProvider();
+        render(
+            <FusionAuthProvider {...TEST_CONFIG}>
+                <FusionAuthLogoutButton />
+            </FusionAuthProvider>,
+        );
 
         fireEvent.click(screen.getByText('Logout'));
 
-        expect(logout).toBeCalledWith();
+        expect(logout).toHaveBeenCalled();
     });
 });
-
-const renderProvider = () => {
-    return waitFor(() =>
-        render(
-            <FusionAuthProvider {...TEST_CONFIG}>
-                <FusionAuthLogoutButton />
-            </FusionAuthProvider>,
-        ),
-    );
-};

src/__tests__/FusionAuthRegisterButton.test.tsx

@@ -1,38 +1,24 @@
 import React from 'react';
-import { screen, render, fireEvent, waitFor } from '@testing-library/react';
+import { screen, render, fireEvent } from '@testing-library/react';
 import { FusionAuthRegisterButton } from '../components/FusionAuthRegisterButton';
 import { FusionAuthProvider } from '../providers/FusionAuthProvider';
 import { mockUseFusionAuth } from './mocks/mockUseFusionAuth';
 import { TEST_CONFIG } from './mocks/testConfig';
 
 describe('FusionAuthRegisterButton', () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    test('Register buttons renders the correct text', async () => {
-        await renderProvider();
-        expect(await screen.findByText('Register Now')).toBeInTheDocument();
-    });
-
     test('Register button will call the useFusionAuth hook', async () => {
         const register = jest.fn();
         mockUseFusionAuth({ register });
 
-        await renderProvider();
+        const stateValue = 'state-value-for-register';
+        render(
+            <FusionAuthProvider {...TEST_CONFIG}>
+                <FusionAuthRegisterButton state={stateValue} />
+            </FusionAuthProvider>,
+        );
 
         fireEvent.click(screen.getByText('Register Now'));
 
-        expect(register).toBeCalledWith('state');
+        expect(register).toHaveBeenCalledWith(stateValue);
     });
 });
-
-const renderProvider = () => {
-    return waitFor(() =>
-        render(
-            <FusionAuthProvider {...TEST_CONFIG}>
-                <FusionAuthRegisterButton state="state" />
-            </FusionAuthProvider>,
-        ),
-    );
-};

src/__tests__/mocks/createContextMock.ts

@@ -1,10 +1,13 @@
 import { IFusionAuthContext } from '../../providers/FusionAuthProvider';
 
-export const createContextMock = (context: Partial<IFusionAuthContext>) => ({
+export const createContextMock = (
+    context: Partial<IFusionAuthContext>,
+): IFusionAuthContext => ({
     login: context.login ?? jest.fn(),
     logout: context.logout ?? jest.fn(),
     register: context.register ?? jest.fn(),
     isAuthenticated: context.isAuthenticated ?? false,
     user: context.user ?? {},
     refreshToken: context.refreshToken ?? jest.fn(),
+    isLoading: context.isLoading ?? false,
 });

src/__tests__/withFusionAuth.test.tsx

@@ -3,19 +3,19 @@ import {
     withFusionAuth,
     WithFusionAuthProps,
 } from '../components/withFusionAuth';
-import { waitFor, render } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import {
     FusionAuthContext,
     IFusionAuthContext,
 } from '../providers/FusionAuthProvider';
 import { createContextMock } from '../__tests__/mocks/createContextMock';
 
 describe('withFusionAuth', () => {
-    test('component wrapped in HOC receives context values', async () => {
+    test('component wrapped in HOC receives context values', () => {
         const logout = jest.fn();
-        await renderWrappedComponent({ logout });
+        renderWrappedComponent({ logout });
 
-        expect(logout).toBeCalled();
+        expect(logout).toHaveBeenCalled();
     });
 });
 
@@ -33,11 +33,9 @@ const WithFusionAuth = withFusionAuth(WithoutFusionAuth);
 
 const renderWrappedComponent = (context: Partial<IFusionAuthContext>) => {
     const contextMock = createContextMock(context);
-    return waitFor(() =>
-        render(
-            <FusionAuthContext.Provider value={contextMock}>
-                <WithFusionAuth />
-            </FusionAuthContext.Provider>,
-        ),
+    render(
+        <FusionAuthContext.Provider value={contextMock}>
+            <WithFusionAuth />
+        </FusionAuthContext.Provider>,
     );
 };