From 05a3c4efde24ecbdeb56829cd13c036748d53525 Mon Sep 17 00:00:00 2001 From: Hamid Date: Tue, 7 Feb 2023 15:20:10 +0800 Subject: [PATCH] hamid/86888/refactor-hook-test-files-to-use-testing-library-react-hooks (#7448) * feat: enhance the tests with react-hooks testing library * feat: enhance the tests with react-hooks testing library * feat: refactor useCountdown store test * feat: refactor useSubscription store test * feat: refactor store test * fix: fix pr comments * fix: fix pr comments --- package-lock.json | 88 ++++++ package.json | 1 + packages/api/package.json | 3 +- .../src/__tests__/useSubscription.spec.tsx | 73 ++--- packages/api/src/__tests__/useWS.spec.tsx | 132 ++++----- packages/components/stories/icon/icons.js | 1 + packages/hooks/package.json | 3 +- .../hooks/src/__tests__/useCountdown.spec.tsx | 262 +++++++++--------- .../src/__tests__/useDepositLocked.spec.tsx | 83 +++--- .../__tests__/useNeedAuthentication.spec.tsx | 53 ++-- .../useNeedFinancialAssessment.spec.tsx | 93 +++---- .../hooks/src/__tests__/useNeedTNC.spec.tsx | 73 +++-- .../src/__tests__/useRealSTPAccount.spec.tsx | 33 +-- packages/stores/package.json | 1 + .../stores/src/__tests__/useStore.spec.tsx | 35 +-- 15 files changed, 442 insertions(+), 492 deletions(-) diff --git a/package-lock.json b/package-lock.json index 229fb6c9d43a..243abcd3fdb5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "@nrwl/nx-cloud": "latest", "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^12.0.0", + "@testing-library/react-hooks": "^7.0.2", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.4.1", "@types/node": "^17.0.27", @@ -5930,6 +5931,51 @@ "@types/react": "^17" } }, + "node_modules/@testing-library/react-hooks": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-7.0.2.tgz", + "integrity": "sha512-dYxpz8u9m4q1TuzfcUApqi8iFfR6R0FaMbr2hjZJy1uC8z+bO/K4v8Gs9eogGKYQop7QsrBTFkv/BCF7MzD2Cg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@types/react": ">=16.9.0", + "@types/react-dom": ">=16.9.0", + "@types/react-test-renderer": ">=16.9.0", + "react-error-boundary": "^3.1.0" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "react": ">=16.9.0", + "react-dom": ">=16.9.0", + "react-test-renderer": ">=16.9.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-test-renderer": { + "optional": true + } + } + }, + "node_modules/@testing-library/react-hooks/node_modules/react-error-boundary": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz", + "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + }, + "peerDependencies": { + "react": ">=16.13.1" + } + }, "node_modules/@testing-library/user-event": { "version": "13.5.0", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz", @@ -6162,6 +6208,15 @@ "@types/react-router": "*" } }, + "node_modules/@types/react-test-renderer": { + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.0.0.tgz", + "integrity": "sha512-C7/5FBJ3g3sqUahguGi03O79b8afNeSD6T8/GU50oQrJCU0bVCCGQHaGKUbg2Ce8VQEEqTw8/HiS6lXHHdgkdQ==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-transition-group": { "version": "4.4.5", "license": "MIT", @@ -26867,6 +26922,30 @@ } } }, + "@testing-library/react-hooks": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-7.0.2.tgz", + "integrity": "sha512-dYxpz8u9m4q1TuzfcUApqi8iFfR6R0FaMbr2hjZJy1uC8z+bO/K4v8Gs9eogGKYQop7QsrBTFkv/BCF7MzD2Cg==", + "dev": true, + "requires": { + "@babel/runtime": "^7.12.5", + "@types/react": ">=16.9.0", + "@types/react-dom": ">=16.9.0", + "@types/react-test-renderer": ">=16.9.0", + "react-error-boundary": "^3.1.0" + }, + "dependencies": { + "react-error-boundary": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz", + "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==", + "dev": true, + "requires": { + "@babel/runtime": "^7.12.5" + } + } + } + }, "@testing-library/user-event": { "version": "13.5.0", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz", @@ -27056,6 +27135,15 @@ "@types/react-router": "*" } }, + "@types/react-test-renderer": { + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.0.0.tgz", + "integrity": "sha512-C7/5FBJ3g3sqUahguGi03O79b8afNeSD6T8/GU50oQrJCU0bVCCGQHaGKUbg2Ce8VQEEqTw8/HiS6lXHHdgkdQ==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/react-transition-group": { "version": "4.4.5", "requires": { diff --git a/package.json b/package.json index 3033abcdbd14..6c06f9872e5e 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@nrwl/nx-cloud": "latest", "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^12.0.0", + "@testing-library/react-hooks": "^7.0.2", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.4.1", "@types/node": "^17.0.27", diff --git a/packages/api/package.json b/packages/api/package.json index 798d39171691..2bb77210d6dc 100644 --- a/packages/api/package.json +++ b/packages/api/package.json @@ -9,8 +9,9 @@ }, "devDependencies": { "@deriv/api-types": "^1.0.54", - "@testing-library/user-event": "^13.5.0", "@testing-library/react": "^12.0.0", + "@testing-library/react-hooks": "^7.0.2", + "@testing-library/user-event": "^13.5.0", "typescript": "^4.6.3" } } diff --git a/packages/api/src/__tests__/useSubscription.spec.tsx b/packages/api/src/__tests__/useSubscription.spec.tsx index 0ae94930ebce..f3327046eb0f 100644 --- a/packages/api/src/__tests__/useSubscription.spec.tsx +++ b/packages/api/src/__tests__/useSubscription.spec.tsx @@ -1,86 +1,53 @@ -import * as React from 'react'; -// Todo: After upgrading to react 18 we should use @testing-library/react-hooks instead. -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { renderHook, act } from '@testing-library/react-hooks'; import { useWS as useWSShared } from '@deriv/shared'; import useSubscription from '../useSubscription'; -import { TSocketRequestProps, TSocketSubscribableEndpointNames } from '../../types'; jest.mock('@deriv/shared'); const mockUseWSShared = useWSShared as jest.MockedFunction; -const UseSubscriptionExample = ({ - name, - request, -}: { - name: T; - request?: TSocketRequestProps; -}) => { - const WS = useSubscription(name); - - return ( - -

{WS.is_loading ? 'true' : 'false'}

-

{WS.error ? JSON.stringify(WS.error) : 'undefined'}

-

{WS.data ? JSON.stringify(WS.data) : 'undefined'}

- - - ); -}; - describe('useSubscription', () => { test('should subscribe to p2p_order_info and get the order updates', async () => { mockUseWSShared.mockReturnValue({ subscribe: jest.fn(() => { return { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - subscribe: async (onData: (response: any) => void, onError: (response: any) => void) => { + subscribe: async (onData: (response: unknown) => void, onError: (response: unknown) => void) => { const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); - await delay(500); - onData({ p2p_order_info: { status: 'pending' } }); - await delay(500); - onData({ p2p_order_info: { status: 'buyer-confirmed' } }); - await delay(500); - onData({ p2p_order_info: { status: 'disputed' } }); - await delay(500); - onError({ error: { code: 'Foo', message: 'Error message' } }); - await delay(500); - onData({ p2p_order_info: { status: 'completed' } }); - return { unsubscribe: () => Promise.resolve() }; }, }; }), }); - render(); + const { result, waitForNextUpdate } = renderHook(() => useSubscription('p2p_order_info')); + + expect(result.current.is_loading).toBe(false); + expect(result.current.error).toBe(undefined); + expect(result.current.data).toBe(undefined); - const is_loading = screen.getByTestId('dt_is_loading'); - const error = screen.getByTestId('dt_error'); - const data = screen.getByTestId('dt_data'); - const subscribe = screen.getByTestId('dt_subscribe'); + act(() => { + result.current.subscribe({ id: '2' }); + }); - expect(is_loading).toHaveTextContent('false'); - expect(error).toHaveTextContent('undefined'); - expect(data).toHaveTextContent('undefined'); - userEvent.click(subscribe); - await waitFor(() => expect(data).toHaveTextContent('{"status":"pending"}')); - await waitFor(() => expect(data).toHaveTextContent('{"status":"buyer-confirmed"}')); - await waitFor(() => expect(data).toHaveTextContent('{"status":"disputed"}')); - await waitFor(() => expect(error).toHaveTextContent('{"code":"Foo","message":"Error message"}')); - await waitFor(() => expect(data).toHaveTextContent('{"status":"completed"}')); + await waitForNextUpdate(); + expect(result.current.data).toStrictEqual({ status: 'pending' }); + await waitForNextUpdate(); + expect(result.current.data).toStrictEqual({ status: 'buyer-confirmed' }); + await waitForNextUpdate(); + expect(result.current.data).toStrictEqual({ status: 'disputed' }); + await waitForNextUpdate(); + expect(result.current.error).toStrictEqual({ code: 'Foo', message: 'Error message' }); + await waitForNextUpdate(); + expect(result.current.data).toStrictEqual({ status: 'completed' }); }); }); diff --git a/packages/api/src/__tests__/useWS.spec.tsx b/packages/api/src/__tests__/useWS.spec.tsx index fe6ec1d86138..f732a6d85bbd 100644 --- a/packages/api/src/__tests__/useWS.spec.tsx +++ b/packages/api/src/__tests__/useWS.spec.tsx @@ -1,47 +1,19 @@ -import * as React from 'react'; -// Todo: After upgrading to react 18 we should use @testing-library/react-hooks instead. -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { renderHook, act } from '@testing-library/react-hooks'; import { useWS as useWSShared } from '@deriv/shared'; import useWS from '../useWS'; -import { TSocketEndpointNames, TSocketRequestProps, TSocketResponse } from '../../types'; +import { TSocketResponse } from '../../types'; jest.mock('@deriv/shared'); const mockUseWSShared = useWSShared as jest.MockedFunction; -const UseWSExample = ({ - name, - request, -}: { - name: T; - request?: TSocketRequestProps; -}) => { - const WS = useWS(name); - - return ( - -

{WS.is_loading ? 'true' : 'false'}

-

{WS.error ? JSON.stringify(WS.error) : 'undefined'}

-

{WS.data ? JSON.stringify(WS.data) : 'undefined'}

- - - ); -}; - describe('useWS', () => { test('should have initial error and data of undefined and is_loading of false', async () => { - render(); - - const is_loading = screen.getByTestId('dt_is_loading'); - const error = screen.getByTestId('dt_error'); - const data = screen.getByTestId('dt_data'); + const { result } = renderHook(() => useWS('ping')); - expect(is_loading).toHaveTextContent('false'); - expect(error).toHaveTextContent('undefined'); - expect(data).toHaveTextContent('undefined'); + expect(result.current.is_loading).toBe(false); + expect(result.current.error).toBe(undefined); + expect(result.current.data).toBe(undefined); }); test('should call ping and get pong in response', async () => { @@ -55,21 +27,21 @@ describe('useWS', () => { ), }); - render(); - - const is_loading = screen.getByTestId('dt_is_loading'); - const error = screen.getByTestId('dt_error'); - const data = screen.getByTestId('dt_data'); - const send = screen.getByTestId('dt_send'); - - expect(is_loading).toHaveTextContent('false'); - expect(error).toHaveTextContent('undefined'); - expect(data).toHaveTextContent('undefined'); - userEvent.click(send); - await waitFor(() => expect(is_loading).toHaveTextContent('true')); - await waitFor(() => expect(data).toHaveTextContent('pong')); - await waitFor(() => expect(error).toHaveTextContent('undefined')); - await waitFor(() => expect(is_loading).toHaveTextContent('false')); + const { result, waitForNextUpdate } = renderHook(() => useWS('ping')); + + expect(result.current.is_loading).toBe(false); + expect(result.current.error).toBe(undefined); + expect(result.current.data).toBe(undefined); + + act(() => { + result.current.send(); + }); + + expect(result.current.is_loading).toBe(true); + await waitForNextUpdate(); + expect(result.current.data).toBe('pong'); + expect(result.current.error).toBe(undefined); + expect(result.current.is_loading).toBe(false); }); test('should call verify_email and get 1 in response', async () => { @@ -83,23 +55,21 @@ describe('useWS', () => { ), }); - render( - - ); - - const is_loading = screen.getByTestId('dt_is_loading'); - const error = screen.getByTestId('dt_error'); - const data = screen.getByTestId('dt_data'); - const send = screen.getByTestId('dt_send'); - - expect(is_loading).toHaveTextContent('false'); - expect(error).toHaveTextContent('undefined'); - expect(data).toHaveTextContent('undefined'); - userEvent.click(send); - await waitFor(() => expect(is_loading).toHaveTextContent('true')); - await waitFor(() => expect(data).toHaveTextContent('1')); - await waitFor(() => expect(error).toHaveTextContent('undefined')); - await waitFor(() => expect(is_loading).toHaveTextContent('false')); + const { result, waitForNextUpdate } = renderHook(() => useWS('verify_email')); + + expect(result.current.is_loading).toBe(false); + expect(result.current.error).toBe(undefined); + expect(result.current.data).toBe(undefined); + + act(() => { + result.current.send({ verify_email: 'test@test.com', type: 'reset_password' }); + }); + + expect(result.current.is_loading).toBe(true); + await waitForNextUpdate(); + expect(result.current.data).toBe(1); + expect(result.current.error).toBe(undefined); + expect(result.current.is_loading).toBe(false); }); test('should call cashier and get ASK_TNC_APPROVAL error code in response', async () => { @@ -116,20 +86,20 @@ describe('useWS', () => { ), }); - render(); - - const is_loading = screen.getByTestId('dt_is_loading'); - const error = screen.getByTestId('dt_error'); - const data = screen.getByTestId('dt_data'); - const send = screen.getByTestId('dt_send'); - - expect(is_loading).toHaveTextContent('false'); - expect(error).toHaveTextContent('undefined'); - expect(data).toHaveTextContent('undefined'); - userEvent.click(send); - await waitFor(() => expect(is_loading).toHaveTextContent('true')); - await waitFor(() => expect(data).toHaveTextContent('undefined')); - await waitFor(() => expect(error).toHaveTextContent('{"code":"ASK_TNC_APPROVAL","message":"Error message"}')); - await waitFor(() => expect(is_loading).toHaveTextContent('false')); + const { result, waitForNextUpdate } = renderHook(() => useWS('cashier')); + + expect(result.current.is_loading).toBe(false); + expect(result.current.error).toBe(undefined); + expect(result.current.data).toBe(undefined); + + act(() => { + result.current.send({ cashier: 'deposit' }); + }); + + expect(result.current.is_loading).toBe(true); + await waitForNextUpdate(); + expect(result.current.data).toBe(undefined); + expect(result.current.error).toStrictEqual({ code: 'ASK_TNC_APPROVAL', message: 'Error message' }); + expect(result.current.is_loading).toBe(false); }); }); diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js index def2d6c47534..30e6297f43f9 100644 --- a/packages/components/stories/icon/icons.js +++ b/packages/components/stories/icon/icons.js @@ -441,6 +441,7 @@ export const icons = 'IcNetellerLight', 'IcNewFile', 'IcNoAd', + 'IcNoData', 'IcNoOrder', 'IcNotificationClear', 'IcNotification', diff --git a/packages/hooks/package.json b/packages/hooks/package.json index c872eaaa3fd0..8eb5da3c8977 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -12,6 +12,7 @@ "devDependencies": { "typescript": "^4.6.3", "@testing-library/user-event": "^13.5.0", - "@testing-library/react": "^12.0.0" + "@testing-library/react": "^12.0.0", + "@testing-library/react-hooks": "^7.0.2" } } diff --git a/packages/hooks/src/__tests__/useCountdown.spec.tsx b/packages/hooks/src/__tests__/useCountdown.spec.tsx index 56089db79ba5..90998c35f546 100644 --- a/packages/hooks/src/__tests__/useCountdown.spec.tsx +++ b/packages/hooks/src/__tests__/useCountdown.spec.tsx @@ -1,157 +1,145 @@ -import * as React from 'react'; -// Todo: After upgrading to react 18 we should use @testing-library/react-hooks instead. -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import useCountdown, { TCountdownOptions } from '../useCountdown'; - -jest.setTimeout(10000); - -const UseCountdownExample = (props: TCountdownOptions) => { - const counter = useCountdown(props); - - return ( - -

{counter.count}

-

{counter.is_running ? 'true' : 'false'}

- - - - - - ); -}; +import { renderHook, act } from '@testing-library/react-hooks'; +import useCountdown from '../useCountdown'; -describe('useCountdown', () => { - test('should have initial count of 10 and is_running of false', () => { - render(); +jest.setTimeout(30000); - const count = screen.getByTestId('dt_count'); - const is_running = screen.getByTestId('dt_is_running'); +describe('useCountdown', () => { + test('should have initial count of 60 and is_running of false', () => { + const { result } = renderHook(() => useCountdown({ from: 60 })); - expect(count).toHaveTextContent('10'); - expect(is_running).toHaveTextContent('false'); + expect(result.current.count).toBe(60); + expect(result.current.is_running).toBe(false); }); - test('should count down from 5 to 0 after start is called and stop once finished', async () => { - render(); - - const count = screen.getByTestId('dt_count'); - const is_running = screen.getByTestId('dt_is_running'); - const start = screen.getByTestId('dt_start'); - - expect(count).toHaveTextContent('5'); - expect(is_running).toHaveTextContent('false'); - userEvent.click(start); - await waitFor(() => expect(is_running).toHaveTextContent('true')); - await waitFor(() => expect(count).toHaveTextContent('4')); - await waitFor(() => expect(count).toHaveTextContent('3')); - await waitFor(() => expect(count).toHaveTextContent('2')); - await waitFor(() => expect(count).toHaveTextContent('1')); - await waitFor(() => expect(count).toHaveTextContent('0')); - await waitFor(() => expect(is_running).toHaveTextContent('false')); + test('should count down from 2 to 0 after start is called and stop once finished', async () => { + const { result, waitForNextUpdate } = renderHook(() => useCountdown({ from: 2 })); + + expect(result.current.count).toBe(2); + expect(result.current.is_running).toBe(false); + + act(() => { + result.current.start(); + }); + + expect(result.current.is_running).toBe(true); + await waitForNextUpdate(); + expect(result.current.count).toBe(1); + await waitForNextUpdate(); + expect(result.current.count).toBe(0); + await waitForNextUpdate(); + expect(result.current.is_running).toBe(false); }); - test('should count down from 2 to -2 after start is called and stop once finished', async () => { - render(); - - const count = screen.getByTestId('dt_count'); - const is_running = screen.getByTestId('dt_is_running'); - const start = screen.getByTestId('dt_start'); - - expect(count).toHaveTextContent('2'); - expect(is_running).toHaveTextContent('false'); - userEvent.click(start); - await waitFor(() => expect(is_running).toHaveTextContent('true')); - await waitFor(() => expect(count).toHaveTextContent('1')); - await waitFor(() => expect(count).toHaveTextContent('0')); - await waitFor(() => expect(count).toHaveTextContent('-1')); - await waitFor(() => expect(count).toHaveTextContent('-2')); - await waitFor(() => expect(is_running).toHaveTextContent('false')); + test('should count down from 1 to -1 after start is called and stop once finished', async () => { + const { result, waitForNextUpdate } = renderHook(() => useCountdown({ from: 1, to: -1 })); + expect(result.current.count).toBe(1); + expect(result.current.is_running).toBe(false); + + act(() => { + result.current.start(); + }); + + expect(result.current.is_running).toBe(true); + await waitForNextUpdate(); + expect(result.current.count).toBe(0); + await waitForNextUpdate(); + expect(result.current.count).toBe(-1); + await waitForNextUpdate(); + expect(result.current.is_running).toBe(false); }); - test('should count down from -2 to 2 after start is called and stop once finished', async () => { - render(); - - const count = screen.getByTestId('dt_count'); - const is_running = screen.getByTestId('dt_is_running'); - const start = screen.getByTestId('dt_start'); - - expect(count).toHaveTextContent('-2'); - expect(is_running).toHaveTextContent('false'); - userEvent.click(start); - await waitFor(() => expect(is_running).toHaveTextContent('true')); - await waitFor(() => expect(count).toHaveTextContent('-1')); - await waitFor(() => expect(count).toHaveTextContent('0')); - await waitFor(() => expect(count).toHaveTextContent('1')); - await waitFor(() => expect(count).toHaveTextContent('2')); - await waitFor(() => expect(is_running).toHaveTextContent('false')); + test('should count down from -1 to 1 after start is called and stop once finished', async () => { + const { result, waitForNextUpdate } = renderHook(() => useCountdown({ from: -1, to: 1, increment: true })); + expect(result.current.count).toBe(-1); + expect(result.current.is_running).toBe(false); + + act(() => { + result.current.start(); + }); + + expect(result.current.is_running).toBe(true); + await waitForNextUpdate(); + expect(result.current.count).toBe(0); + await waitForNextUpdate(); + expect(result.current.count).toBe(1); + await waitForNextUpdate(); + expect(result.current.is_running).toBe(false); }); test('should count down from 3 to 0 after start is called and reset the counter at 1 and stop once finished', async () => { - render(); - - const count = screen.getByTestId('dt_count'); - const is_running = screen.getByTestId('dt_is_running'); - const start = screen.getByTestId('dt_start'); - const reset = screen.getByTestId('dt_reset'); - - expect(count).toHaveTextContent('3'); - expect(is_running).toHaveTextContent('false'); - userEvent.click(start); - await waitFor(() => expect(is_running).toHaveTextContent('true')); - await waitFor(() => expect(count).toHaveTextContent('2')); - await waitFor(() => expect(count).toHaveTextContent('1')); - userEvent.click(reset); - await waitFor(() => expect(count).toHaveTextContent('3')); - await waitFor(() => expect(count).toHaveTextContent('2')); - await waitFor(() => expect(count).toHaveTextContent('1')); - await waitFor(() => expect(count).toHaveTextContent('0')); - await waitFor(() => expect(is_running).toHaveTextContent('false')); + const { result, waitForNextUpdate } = renderHook(() => useCountdown({ from: 3 })); + expect(result.current.count).toBe(3); + expect(result.current.is_running).toBe(false); + + act(() => { + result.current.start(); + }); + + expect(result.current.is_running).toBe(true); + await waitForNextUpdate(); + expect(result.current.count).toBe(2); + await waitForNextUpdate(); + expect(result.current.count).toBe(1); + + act(() => { + result.current.reset(); + }); + + expect(result.current.count).toBe(3); + await waitForNextUpdate(); + expect(result.current.count).toBe(2); + await waitForNextUpdate(); + expect(result.current.count).toBe(1); + await waitForNextUpdate(); + expect(result.current.count).toBe(0); + await waitForNextUpdate(); + expect(result.current.is_running).toBe(false); }); test('should count down from 3 to 0 after start is called and pause the counter at 1', async () => { - render(); - - const count = screen.getByTestId('dt_count'); - const is_running = screen.getByTestId('dt_is_running'); - const start = screen.getByTestId('dt_start'); - const pause = screen.getByTestId('dt_pause'); - - expect(count).toHaveTextContent('3'); - expect(is_running).toHaveTextContent('false'); - userEvent.click(start); - await waitFor(() => expect(is_running).toHaveTextContent('true')); - await waitFor(() => expect(count).toHaveTextContent('2')); - await waitFor(() => expect(count).toHaveTextContent('1')); - userEvent.click(pause); - await waitFor(() => expect(count).toHaveTextContent('1')); - await waitFor(() => expect(is_running).toHaveTextContent('false')); + const { result, waitForNextUpdate } = renderHook(() => useCountdown({ from: 3 })); + expect(result.current.count).toBe(3); + expect(result.current.is_running).toBe(false); + + act(() => { + result.current.start(); + }); + + expect(result.current.is_running).toBe(true); + await waitForNextUpdate(); + expect(result.current.count).toBe(2); + await waitForNextUpdate(); + expect(result.current.count).toBe(1); + + act(() => { + result.current.pause(); + }); + + expect(result.current.count).toBe(1); + expect(result.current.is_running).toBe(false); }); test('should count down from 3 to 0 after start is called and stop the counter at 1', async () => { - render(); - - const count = screen.getByTestId('dt_count'); - const is_running = screen.getByTestId('dt_is_running'); - const start = screen.getByTestId('dt_start'); - const stop = screen.getByTestId('dt_stop'); - - expect(count).toHaveTextContent('3'); - expect(is_running).toHaveTextContent('false'); - userEvent.click(start); - await waitFor(() => expect(is_running).toHaveTextContent('true')); - await waitFor(() => expect(count).toHaveTextContent('2')); - await waitFor(() => expect(count).toHaveTextContent('1')); - userEvent.click(stop); - await waitFor(() => expect(count).toHaveTextContent('3')); - await waitFor(() => expect(is_running).toHaveTextContent('false')); + const { result, waitForNextUpdate } = renderHook(() => useCountdown({ from: 3 })); + + expect(result.current.count).toBe(3); + expect(result.current.is_running).toBe(false); + + act(() => { + result.current.start(); + }); + + expect(result.current.is_running).toBe(true); + await waitForNextUpdate(); + expect(result.current.count).toBe(2); + await waitForNextUpdate(); + expect(result.current.count).toBe(1); + + act(() => { + result.current.stop(); + }); + + expect(result.current.count).toBe(3); + expect(result.current.is_running).toBe(false); }); }); diff --git a/packages/hooks/src/__tests__/useDepositLocked.spec.tsx b/packages/hooks/src/__tests__/useDepositLocked.spec.tsx index ee272226f0ec..56a4674185e2 100644 --- a/packages/hooks/src/__tests__/useDepositLocked.spec.tsx +++ b/packages/hooks/src/__tests__/useDepositLocked.spec.tsx @@ -1,23 +1,12 @@ import * as React from 'react'; import { StoreProvider } from '@deriv/stores'; import type { TStores } from '@deriv/stores'; -// Todo: After upgrading to react 18 we should use @testing-library/react-hooks instead. -import { render, screen } from '@testing-library/react'; +import { renderHook } from '@testing-library/react-hooks'; import useDepositLocked from '../useDepositLocked'; import useNeedAuthentication from '../useNeedAuthentication'; jest.mock('../useNeedAuthentication', () => jest.fn(() => false)); -const UseDepositLockedExample = () => { - const is_deposit_locked = useDepositLocked(); - - return ( - <> -

{is_deposit_locked ? 'true' : 'false'}

- - ); -}; - describe('useDepositLocked', () => { test('should be false if none of the conditions are met', () => { const mockRootStore: DeepPartial = { @@ -39,12 +28,12 @@ describe('useDepositLocked', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useDepositLocked(), { wrapper }); - const is_deposit_locked = screen.getByTestId('dt_is_deposit_locked'); - expect(is_deposit_locked).toHaveTextContent('false'); + expect(result.current).toBe(false); }); test('should be true if is_deposit_lock is true', async () => { @@ -67,12 +56,12 @@ describe('useDepositLocked', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useDepositLocked(), { wrapper }); - const is_deposit_locked = screen.getByTestId('dt_is_deposit_locked'); - expect(is_deposit_locked).toHaveTextContent('true'); + expect(result.current).toBe(true); }); test('should be true if is_need_tnc is true', async () => { @@ -95,12 +84,12 @@ describe('useDepositLocked', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useDepositLocked(), { wrapper }); - const is_deposit_locked = screen.getByTestId('dt_is_deposit_locked'); - expect(is_deposit_locked).toHaveTextContent('true'); + expect(result.current).toBe(true); }); test('should be true if is_need_financial_assessment is true', async () => { @@ -123,12 +112,12 @@ describe('useDepositLocked', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useDepositLocked(), { wrapper }); - const is_deposit_locked = screen.getByTestId('dt_is_deposit_locked'); - expect(is_deposit_locked).toHaveTextContent('true'); + expect(result.current).toBe(true); }); test('should be true if is_need_authentication is true', async () => { @@ -151,12 +140,12 @@ describe('useDepositLocked', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useDepositLocked(), { wrapper }); - const is_deposit_locked = screen.getByTestId('dt_is_deposit_locked'); - expect(is_deposit_locked).toHaveTextContent('true'); + expect(result.current).toBe(true); }); test('should be true if is_need_financial_assessment is true and landing_company_shortcode as svg', async () => { @@ -179,12 +168,12 @@ describe('useDepositLocked', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useDepositLocked(), { wrapper }); - const is_deposit_locked = screen.getByTestId('dt_is_deposit_locked'); - expect(is_deposit_locked).toHaveTextContent('true'); + expect(result.current).toBe(true); }); test('should be true if is_trading_experience_incomplete is true and landing_company_shortcode as maltainvest', async () => { @@ -207,11 +196,11 @@ describe('useDepositLocked', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useDepositLocked(), { wrapper }); - const is_deposit_locked = screen.getByTestId('dt_is_deposit_locked'); - expect(is_deposit_locked).toHaveTextContent('true'); + expect(result.current).toBe(true); }); }); diff --git a/packages/hooks/src/__tests__/useNeedAuthentication.spec.tsx b/packages/hooks/src/__tests__/useNeedAuthentication.spec.tsx index 5be744c1b36b..21b03a3bafba 100644 --- a/packages/hooks/src/__tests__/useNeedAuthentication.spec.tsx +++ b/packages/hooks/src/__tests__/useNeedAuthentication.spec.tsx @@ -1,21 +1,10 @@ import * as React from 'react'; import { StoreProvider } from '@deriv/stores'; import type { TStores } from '@deriv/stores'; -// Todo: After upgrading to react 18 we should use @testing-library/react-hooks instead. -import { render, screen } from '@testing-library/react'; import { ContentFlag } from '@deriv/shared'; +import { renderHook } from '@testing-library/react-hooks'; import useNeedAuthentication from '../useNeedAuthentication'; -const UseNeedAuthenticationExample = () => { - const is_need_authentication = useNeedAuthentication(); - - return ( - <> -

{is_need_authentication ? 'true' : 'false'}

- - ); -}; - describe('useNeedAuthentication', () => { test('should be false if is_authentication_needed and is_eu both are false', async () => { const mockRootStore: DeepPartial = { @@ -27,12 +16,12 @@ describe('useNeedAuthentication', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedAuthentication(), { wrapper }); - const is_need_authentication = screen.getByTestId('dt_is_need_authentication'); - expect(is_need_authentication).toHaveTextContent('false'); + expect(result.current).toBe(false); }); test('should be false if is_authentication_needed is false and is_eu is true', async () => { @@ -45,12 +34,12 @@ describe('useNeedAuthentication', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedAuthentication(), { wrapper }); - const is_need_authentication = screen.getByTestId('dt_is_need_authentication'); - expect(is_need_authentication).toHaveTextContent('false'); + expect(result.current).toBe(false); }); test('should be false if is_authentication_needed is true and is_eu is false', async () => { @@ -63,12 +52,12 @@ describe('useNeedAuthentication', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedAuthentication(), { wrapper }); - const is_need_authentication = screen.getByTestId('dt_is_need_authentication'); - expect(is_need_authentication).toHaveTextContent('false'); + expect(result.current).toBe(false); }); test('should be true if is_authentication_needed and is_eu both are true', async () => { @@ -81,11 +70,11 @@ describe('useNeedAuthentication', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedAuthentication(), { wrapper }); - const is_need_authentication = screen.getByTestId('dt_is_need_authentication'); - expect(is_need_authentication).toHaveTextContent('true'); + expect(result.current).toBe(true); }); }); diff --git a/packages/hooks/src/__tests__/useNeedFinancialAssessment.spec.tsx b/packages/hooks/src/__tests__/useNeedFinancialAssessment.spec.tsx index b83bfa2d39f6..cdb9eeee4671 100644 --- a/packages/hooks/src/__tests__/useNeedFinancialAssessment.spec.tsx +++ b/packages/hooks/src/__tests__/useNeedFinancialAssessment.spec.tsx @@ -1,20 +1,9 @@ import * as React from 'react'; import { StoreProvider } from '@deriv/stores'; import type { TStores } from '@deriv/stores'; -// Todo: After upgrading to react 18 we should use @testing-library/react-hooks instead. -import { render, screen } from '@testing-library/react'; +import { renderHook } from '@testing-library/react-hooks'; import useNeedFinancialAssessment from '../useNeedFinancialAssessment'; -const UseNeedFinancialAssessmentExample = () => { - const is_need_financial_assessment = useNeedFinancialAssessment(); - - return ( - <> -

{is_need_financial_assessment ? 'true' : 'false'}

- - ); -}; - describe('useNeedFinancialAssessment', () => { test('should be false if is_financial_account, is_financial_information_incomplete and is_trading_experience_incomplete all are false', async () => { const mockRootStore: DeepPartial = { @@ -25,12 +14,12 @@ describe('useNeedFinancialAssessment', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedFinancialAssessment(), { wrapper }); - const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment'); - expect(is_need_financial_assessment).toHaveTextContent('false'); + expect(result.current).toBe(false); }); test('should be false if is_financial_account and is_trading_experience_incomplete are false and is_financial_information_incomplete is true', async () => { @@ -42,12 +31,12 @@ describe('useNeedFinancialAssessment', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedFinancialAssessment(), { wrapper }); - const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment'); - expect(is_need_financial_assessment).toHaveTextContent('false'); + expect(result.current).toBe(false); }); test('should be false if is_financial_account and is_financial_information_incomplete are false and is_trading_experience_incomplete is true', async () => { @@ -59,12 +48,12 @@ describe('useNeedFinancialAssessment', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedFinancialAssessment(), { wrapper }); - const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment'); - expect(is_need_financial_assessment).toHaveTextContent('false'); + expect(result.current).toBe(false); }); test('should be false if is_financial_account is false but is_financial_information_incomplete and is_trading_experience_incomplete both are true', async () => { @@ -76,12 +65,12 @@ describe('useNeedFinancialAssessment', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedFinancialAssessment(), { wrapper }); - const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment'); - expect(is_need_financial_assessment).toHaveTextContent('false'); + expect(result.current).toBe(false); }); test('should be false if is_financial_account is true but is_financial_information_incomplete and is_trading_experience_incomplete both are false', async () => { @@ -93,12 +82,12 @@ describe('useNeedFinancialAssessment', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedFinancialAssessment(), { wrapper }); - const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment'); - expect(is_need_financial_assessment).toHaveTextContent('false'); + expect(result.current).toBe(false); }); test('should be true if is_financial_account and is_financial_information_incomplete are true and is_trading_experience_incomplete is false', async () => { @@ -110,12 +99,12 @@ describe('useNeedFinancialAssessment', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedFinancialAssessment(), { wrapper }); - const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment'); - expect(is_need_financial_assessment).toHaveTextContent('true'); + expect(result.current).toBe(true); }); test('should be true if is_financial_account and is_trading_experience_incomplete are true and is_financial_information_incomplete is false', async () => { @@ -127,12 +116,12 @@ describe('useNeedFinancialAssessment', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedFinancialAssessment(), { wrapper }); - const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment'); - expect(is_need_financial_assessment).toHaveTextContent('true'); + expect(result.current).toBe(true); }); test('should be true if is_financial_account, is_financial_information_incomplete and is_trading_experience_incomplete all are true', async () => { @@ -144,11 +133,11 @@ describe('useNeedFinancialAssessment', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedFinancialAssessment(), { wrapper }); - const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment'); - expect(is_need_financial_assessment).toHaveTextContent('true'); + expect(result.current).toBe(true); }); }); diff --git a/packages/hooks/src/__tests__/useNeedTNC.spec.tsx b/packages/hooks/src/__tests__/useNeedTNC.spec.tsx index dd4f850b5b1b..061e5d439610 100644 --- a/packages/hooks/src/__tests__/useNeedTNC.spec.tsx +++ b/packages/hooks/src/__tests__/useNeedTNC.spec.tsx @@ -1,20 +1,9 @@ import * as React from 'react'; import { StoreProvider } from '@deriv/stores'; import type { TStores } from '@deriv/stores'; -// Todo: After upgrading to react 18 we should use @testing-library/react-hooks instead. -import { render, screen } from '@testing-library/react'; +import { renderHook } from '@testing-library/react-hooks'; import useNeedTNC from '../useNeedTNC'; -const UseNeedTNCExample = () => { - const is_need_tnc = useNeedTNC(); - - return ( - <> -

{is_need_tnc ? 'true' : 'false'}

- - ); -}; - describe('useNeedTNC', () => { test('should be false if is_tnc_needed and is_eu are false and does not have an real STP account', async () => { const mockRootStore: DeepPartial = { @@ -30,12 +19,12 @@ describe('useNeedTNC', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedTNC(), { wrapper }); - const is_need_tnc = screen.getByTestId('dt_is_need_tnc'); - expect(is_need_tnc).toHaveTextContent('false'); + expect(result.current).toBe(false); }); test('should be false if is_tnc_needed is false but is_eu is true and does not have an real STP account', async () => { @@ -52,12 +41,12 @@ describe('useNeedTNC', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedTNC(), { wrapper }); - const is_need_tnc = screen.getByTestId('dt_is_need_tnc'); - expect(is_need_tnc).toHaveTextContent('false'); + expect(result.current).toBe(false); }); test('should be false if is_tnc_needed and is_eu are false but has an real STP account', async () => { @@ -74,12 +63,12 @@ describe('useNeedTNC', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedTNC(), { wrapper }); - const is_need_tnc = screen.getByTestId('dt_is_need_tnc'); - expect(is_need_tnc).toHaveTextContent('false'); + expect(result.current).toBe(false); }); test('should be true if is_tnc_needed is true and is_eu is false but has an real STP account', async () => { @@ -96,12 +85,12 @@ describe('useNeedTNC', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedTNC(), { wrapper }); - const is_need_tnc = screen.getByTestId('dt_is_need_tnc'); - expect(is_need_tnc).toHaveTextContent('true'); + expect(result.current).toBe(true); }); test('should be true if is_tnc_needed and is_eu are true and does not have an real STP account', async () => { @@ -118,12 +107,12 @@ describe('useNeedTNC', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedTNC(), { wrapper }); - const is_need_tnc = screen.getByTestId('dt_is_need_tnc'); - expect(is_need_tnc).toHaveTextContent('true'); + expect(result.current).toBe(true); }); test('should be true if is_tnc_needed and is_eu are true and has an real STP account', async () => { @@ -140,11 +129,11 @@ describe('useNeedTNC', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useNeedTNC(), { wrapper }); - const is_need_tnc = screen.getByTestId('dt_is_need_tnc'); - expect(is_need_tnc).toHaveTextContent('true'); + expect(result.current).toBe(true); }); }); diff --git a/packages/hooks/src/__tests__/useRealSTPAccount.spec.tsx b/packages/hooks/src/__tests__/useRealSTPAccount.spec.tsx index d83bdb0b8d11..97b3bb54f6eb 100644 --- a/packages/hooks/src/__tests__/useRealSTPAccount.spec.tsx +++ b/packages/hooks/src/__tests__/useRealSTPAccount.spec.tsx @@ -1,20 +1,9 @@ import * as React from 'react'; import { StoreProvider } from '@deriv/stores'; import type { TStores } from '@deriv/stores'; -// Todo: After upgrading to react 18 we should use @testing-library/react-hooks instead. -import { render, screen } from '@testing-library/react'; +import { renderHook } from '@testing-library/react-hooks'; import useRealSTPAccount from '../useRealSTPAccount'; -const UseRealSTPAccountExample = () => { - const has_real_stp_account = useRealSTPAccount(); - - return ( - <> -

{has_real_stp_account ? 'true' : 'false'}

- - ); -}; - describe('useRealSTPAccount', () => { test('should be false if does not have an account type of real with sub account type of financial_stp', async () => { const mockRootStore: DeepPartial = { @@ -32,12 +21,12 @@ describe('useRealSTPAccount', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useRealSTPAccount(), { wrapper }); - const has_real_stp_account = screen.getByTestId('dt_has_real_stp_account'); - expect(has_real_stp_account).toHaveTextContent('false'); + expect(result.current).toBe(false); }); test('should be true if has an account type of real with sub account type of financial_stp', async () => { @@ -56,11 +45,11 @@ describe('useRealSTPAccount', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useRealSTPAccount(), { wrapper }); - const has_real_stp_account = screen.getByTestId('dt_has_real_stp_account'); - expect(has_real_stp_account).toHaveTextContent('true'); + expect(result.current).toBe(true); }); }); diff --git a/packages/stores/package.json b/packages/stores/package.json index 28f5a892a675..d50cf92d44c2 100644 --- a/packages/stores/package.json +++ b/packages/stores/package.json @@ -13,6 +13,7 @@ "devDependencies": { "@deriv/api-types": "^1.0.54", "@testing-library/react": "^12.0.0", + "@testing-library/react-hooks": "^7.0.2", "@types/lodash.merge": "^4.6.7", "react-router": "^5.2.0", "typescript": "^4.6.3" diff --git a/packages/stores/src/__tests__/useStore.spec.tsx b/packages/stores/src/__tests__/useStore.spec.tsx index a3caffcd1544..0f3ac61d842b 100644 --- a/packages/stores/src/__tests__/useStore.spec.tsx +++ b/packages/stores/src/__tests__/useStore.spec.tsx @@ -1,27 +1,15 @@ import * as React from 'react'; -// Todo: After upgrading to react 18 we should use @testing-library/react-hooks instead. -import { render, screen } from '@testing-library/react'; -import { StoreProvider, useStore } from '../useStore'; -import { TRootStore } from '../../types'; - -const UseStoreExample = () => { - const store = useStore(); - - return ( - <> -

{store.client.email}

-

{store.ui.is_dark_mode_on ? 'true' : 'false'}

- - ); -}; +import { renderHook } from '@testing-library/react-hooks'; +import { StoreProvider, useStore, TStores } from '../useStore'; describe('useStore', () => { test('should throw an error if StoreContext has not been provided', async () => { - expect(() => render()).toThrowError('useStore must be used within StoreContext'); + const { result } = renderHook(() => useStore()); + expect(result.error).toEqual(Error('useStore must be used within StoreContext')); }); test('should be able to access store data if StoreContext has been provided', async () => { - const mockRootStore: DeepPartial = { + const mockRootStore: DeepPartial = { client: { email: 'john@company.com', }, @@ -30,13 +18,12 @@ describe('useStore', () => { }, }; - render(, { - wrapper: ({ children }) => {children}, - }); + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + const { result } = renderHook(() => useStore(), { wrapper }); - const email = screen.getByTestId('dt_email'); - const is_dark_mode_on = screen.getByTestId('dt_is_dark_mode_on'); - expect(email).toHaveTextContent('john@company.com'); - expect(is_dark_mode_on).toHaveTextContent('true'); + expect(result.current.client.email).toBe('john@company.com'); + expect(result.current.ui.is_dark_mode_on).toBe(true); }); });