From 4529d3a1b4aa2e6c634f691b5bfd3b9dc41b3b04 Mon Sep 17 00:00:00 2001 From: Jake Loew Date: Thu, 15 Feb 2024 09:57:12 -0700 Subject: [PATCH] fixes usage of waitFor to render component tests --- src/__tests__/FusionAuthLoginButton.test.tsx | 33 +++++-------------- src/__tests__/FusionAuthLogoutButton.test.tsx | 31 +++++------------ .../FusionAuthRegisterButton.test.tsx | 30 +++++------------ src/__tests__/mocks/createContextMock.ts | 5 ++- src/__tests__/withFusionAuth.test.tsx | 18 +++++----- 5 files changed, 37 insertions(+), 80 deletions(-) diff --git a/src/__tests__/FusionAuthLoginButton.test.tsx b/src/__tests__/FusionAuthLoginButton.test.tsx index 271cebd..4001ef5 100644 --- a/src/__tests__/FusionAuthLoginButton.test.tsx +++ b/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( + + + , + ); fireEvent.click(screen.getByText('Login')); - - expect(login).toBeCalledWith('state'); + expect(login).toHaveBeenCalledWith(stateValue); }); }); - -const renderProvider = () => { - return waitFor(() => - render( - - - , - ), - ); -}; diff --git a/src/__tests__/FusionAuthLogoutButton.test.tsx b/src/__tests__/FusionAuthLogoutButton.test.tsx index 67209e9..c54368c 100644 --- a/src/__tests__/FusionAuthLogoutButton.test.tsx +++ b/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( + + + , + ); fireEvent.click(screen.getByText('Logout')); - expect(logout).toBeCalledWith(); + expect(logout).toHaveBeenCalled(); }); }); - -const renderProvider = () => { - return waitFor(() => - render( - - - , - ), - ); -}; diff --git a/src/__tests__/FusionAuthRegisterButton.test.tsx b/src/__tests__/FusionAuthRegisterButton.test.tsx index dc279c6..bf34fef 100644 --- a/src/__tests__/FusionAuthRegisterButton.test.tsx +++ b/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( + + + , + ); fireEvent.click(screen.getByText('Register Now')); - expect(register).toBeCalledWith('state'); + expect(register).toHaveBeenCalledWith(stateValue); }); }); - -const renderProvider = () => { - return waitFor(() => - render( - - - , - ), - ); -}; diff --git a/src/__tests__/mocks/createContextMock.ts b/src/__tests__/mocks/createContextMock.ts index f751903..cf7edc3 100644 --- a/src/__tests__/mocks/createContextMock.ts +++ b/src/__tests__/mocks/createContextMock.ts @@ -1,10 +1,13 @@ import { IFusionAuthContext } from '../../providers/FusionAuthProvider'; -export const createContextMock = (context: Partial) => ({ +export const createContextMock = ( + context: Partial, +): 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, }); diff --git a/src/__tests__/withFusionAuth.test.tsx b/src/__tests__/withFusionAuth.test.tsx index efe6ced..b656274 100644 --- a/src/__tests__/withFusionAuth.test.tsx +++ b/src/__tests__/withFusionAuth.test.tsx @@ -3,7 +3,7 @@ import { withFusionAuth, WithFusionAuthProps, } from '../components/withFusionAuth'; -import { waitFor, render } from '@testing-library/react'; +import { render } from '@testing-library/react'; import { FusionAuthContext, IFusionAuthContext, @@ -11,11 +11,11 @@ import { 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) => { const contextMock = createContextMock(context); - return waitFor(() => - render( - - - , - ), + render( + + + , ); };