feat(project): update react

- Update React to 18.2.0
- Update testing librarires and fix tests
- Update Node to 18.13.0

package.json

@@ -6,7 +6,7 @@
   "author": "JW Player",
   "private": true,
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=18.13.0"
   },
   "scripts": {
     "prepare": "husky install",
@@ -69,9 +69,8 @@
     "@codeceptjs/configure": "^0.8.0",
     "@commitlint/cli": "^12.1.1",
     "@commitlint/config-conventional": "^12.1.1",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
     "@types/dompurify": "^2.3.4",
     "@types/ini": "^1.3.31",
     "@types/jwplayer": "^8.2.13",
@@ -128,7 +127,7 @@
     "vite-plugin-pwa": "^0.14.0",
     "vite-plugin-static-copy": "^0.13.0",
     "vite-plugin-stylelint": "^4.0.1",
-    "vitest": "^0.32.3",
+    "vitest": "^0.33.0",
     "workbox-build": "^6.5.4",
     "workbox-window": "^6.5.4"
   },

src/components/Account/__snapshots__/Account.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Account> > renders and matches snapshot 1`] = `
 <div>

src/components/Alert/__snapshots__/Alert.test.tsx.snap

@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Alert> > renders and matches snapshot 1`] = `<div />`;

src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Button> > renders and matches snapshot 1`] = `
 <div>

src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CancelSubscriptionForm> > renders and matches snapshot 1`] = `
 <div>

src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CardGrid> > renders and matches snapshot 1`] = `
 <div>

src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Checkbox> > renders and matches snapshot 1`] = `
 <div>

src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
 <div>

src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<OffersForm> > renders and matches snapshot 1`] = `
 <div>

src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CollapsibleText> > renders and matches snapshot 1`] = `
 <div>

src/components/ConfirmationDialog/__snapshots__/ConfirmationDialog.test.tsx.snap

@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ConfirmationDialog> > renders and matches snapshot 1`] = `<div />`;

src/components/ConfirmationForm/__snapshots__/ConfirmationForm.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ConfirmationForm> > renders and matches snapshot 1`] = `
 <div>

src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CreditCardCVCField> > renders and matches snapshot 1`] = `
 <div>

src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CreditCardExpiryField> > renders and matches snapshot 1`] = `
 <div>

src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CreditCardNumberField> > renders and matches snapshot 1`] = `
 <div>

src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<DemoConfigDialog> > renders and matches snapshot 1`] = `
 <div>

src/components/Dialog/__snapshots__/Dialog.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Dialog> > renders and matches snapshot 1`] = `
 <body

src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<DialogBackButton> > renders and matches snapshot 1`] = `
 <div>

src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
 <div>

src/components/Epg/Epg.tsx

@@ -39,13 +39,13 @@ export default function Epg({ channels, onChannelClick, onProgramClick, channel,
 
   // Epg
   const { highlightColor, backgroundColor } = config.styling;
-  const { getEpgProps, getLayoutProps, onScrollToNow, onScrollLeft, onScrollRight } = usePlanByEpg(
+  const { getEpgProps, getLayoutProps, onScrollToNow, onScrollLeft, onScrollRight } = usePlanByEpg({
     channels,
     sidebarWidth,
     itemHeight,
     highlightColor,
     backgroundColor,
-  );
+  });
   const catchupHoursDict = useMemo(() => Object.fromEntries(channels.map((channel) => [channel.id, channel.catchupHours])), [channels]);
 
   return (

src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ErrorPage> > renders and matches snapshot 1`] = `
 <div>

src/components/Favorites/__snapshots__/Favorites.test.tsx.snap

@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Favorites> > renders and matches snapshot 1`] = `<div />`;

src/components/Filter/__snapshots__/Filter.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Filter> > renders Filter 1`] = `
 <div>

src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ForgotPasswordForm> > renders and matches snapshot type forgot 1`] = `
 <div>

src/components/Form/__snapshots__/Form.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Form> > renders Form 1`] = `
 <div>

src/components/FormFeedback/__snapshots__/FormFeedback.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<FormFeedback> > renders and matches snapshot 1`] = `
 <div>

src/components/Header/__snapshots__/Header.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Header /> > renders header 1`] = `
 <div>

src/components/HelperText/__snapshots__/HelperText.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<HelperText> > renders and matches snapshot 1`] = `
 <div>

src/components/IconButton/__snapshots__/IconButton.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<IconButton> > renders and matches snapshot 1`] = `
 <div>

src/components/LanguageMenu/LanguageMenu.test.tsx

@@ -28,8 +28,8 @@ describe('<LanguageMenu>', () => {
     const currentLanguage = languages[1];
     const { queryByText } = renderWithRouter(<LanguageMenu languages={languages} currentLanguage={currentLanguage} onClick={() => undefined} />);
 
-    expect(queryByText('English')).toBeInTheDOM();
-    expect(queryByText('español')).toBeInTheDOM();
+    expect(queryByText('English')).toBeInTheDocument();
+    expect(queryByText('español')).toBeInTheDocument();
   });
 
   test('renders languages and calls the onClick callback with the correct language code', () => {

src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<LanguageMenu> > renders and matches snapshot 1`] = `
 <div>

src/components/Link/__snapshots__/Link.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Link> > renders and matches snapshot 1`] = `
 <div>

src/components/LoginForm/LoginForm.test.tsx

@@ -1,13 +1,36 @@
 import React from 'react';
-import { fireEvent } from '@testing-library/react';
+import { fireEvent, act, render } from '@testing-library/react';
 
 import LoginForm from './LoginForm';
 
-import { renderWithRouter } from '#test/testUtils';
+import { createWrapper, waitForWithFakeTimers } from '#test/testUtils';
 
 describe('<LoginForm>', () => {
-  test('renders and matches snapshot', () => {
-    const { container } = renderWithRouter(
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.mock('#src/stores/AccountController', async (importOriginal) => {
+      const mod = await importOriginal();
+
+      return {
+        ...(mod as Record<string, unknown>),
+        getSocialLoginUrls: () =>
+          Promise.resolve([
+            {
+              twitter: 'https://staging-v2.inplayer.com/',
+            },
+            {
+              facebook: 'https://www.facebook.com/',
+            },
+            {
+              google: 'https://accounts.google.com/',
+            },
+          ]),
+      };
+    });
+  });
+
+  test('renders and matches snapshot', async () => {
+    const { container } = render(
       <LoginForm
         onSubmit={vi.fn()}
         onChange={vi.fn()}
@@ -18,13 +41,16 @@ describe('<LoginForm>', () => {
         errors={{}}
         submitting={false}
       />,
+      { wrapper: createWrapper() },
     );
 
+    await waitForWithFakeTimers();
+
     expect(container).toMatchSnapshot();
   });
 
-  test('sets the correct values in the form fields', () => {
-    const { getByLabelText } = renderWithRouter(
+  test('sets the correct values in the form fields', async () => {
+    const { getByLabelText } = render(
       <LoginForm
         onSubmit={vi.fn()}
         onChange={vi.fn()}
@@ -35,14 +61,17 @@ describe('<LoginForm>', () => {
         errors={{}}
         submitting={false}
       />,
+      { wrapper: createWrapper() },
     );
 
+    await waitForWithFakeTimers();
+
     expect(getByLabelText('login.email')).toHaveValue('myemail@email.com');
     expect(getByLabelText('login.password')).toHaveValue('mypassword');
   });
 
-  test('sets the correct errors in the form fields', () => {
-    const { queryByText } = renderWithRouter(
+  test('sets the correct errors in the form fields', async () => {
+    const { queryByText } = render(
       <LoginForm
         onSubmit={vi.fn()}
         onChange={vi.fn()}
@@ -53,15 +82,18 @@ describe('<LoginForm>', () => {
         errors={{ email: 'Email error', password: 'Password error', form: 'Form error' }}
         submitting={false}
       />,
+      { wrapper: createWrapper() },
     );
 
+    await waitForWithFakeTimers();
+
     expect(queryByText('Email error')).toBeDefined();
     expect(queryByText('Password error')).toBeDefined();
     expect(queryByText('Form error')).toBeDefined();
   });
 
-  test('disables the submit button when submitting is true', () => {
-    const { getByRole } = renderWithRouter(
+  test('disables the submit button when submitting is true', async () => {
+    const { getByRole } = render(
       <LoginForm
         onSubmit={vi.fn()}
         onChange={vi.fn()}
@@ -72,14 +104,18 @@ describe('<LoginForm>', () => {
         errors={{}}
         submitting={true}
       />,
+      { wrapper: createWrapper() },
     );
 
+    await waitForWithFakeTimers();
+
     expect(getByRole('button', { name: 'login.sign_in' })).toBeDisabled();
   });
 
-  test('calls the onSubmit callback when the form gets submitted', () => {
+  test('calls the onSubmit callback when the form gets submitted', async () => {
     const onSubmit = vi.fn();
-    const { getByTestId } = renderWithRouter(
+
+    const { getByTestId } = render(
       <LoginForm
         onSubmit={onSubmit}
         onChange={vi.fn()}
@@ -90,16 +126,22 @@ describe('<LoginForm>', () => {
         errors={{}}
         submitting={true}
       />,
+      { wrapper: createWrapper() },
     );
 
-    fireEvent.submit(getByTestId('login-form'));
+    act(() => {
+      fireEvent.submit(getByTestId('login-form'));
+    });
+
+    await waitForWithFakeTimers();
 
     expect(onSubmit).toBeCalled();
   });
 
-  test('calls the onChange callback when a text field changes', () => {
+  test('calls the onChange callback when a text field changes', async () => {
     const onChange = vi.fn();
-    const { getByLabelText } = renderWithRouter(
+
+    const { getByLabelText } = render(
       <LoginForm
         onSubmit={vi.fn()}
         onChange={onChange}
@@ -110,10 +152,15 @@ describe('<LoginForm>', () => {
         errors={{}}
         submitting={true}
       />,
+      { wrapper: createWrapper() },
     );
 
-    fireEvent.change(getByLabelText('login.email'), { target: { value: 'email' } });
-    fireEvent.change(getByLabelText('login.password'), { target: { value: 'password' } });
+    act(() => {
+      fireEvent.change(getByLabelText('login.email'), { target: { value: 'email' } });
+      fireEvent.change(getByLabelText('login.password'), { target: { value: 'password' } });
+    });
+
+    await waitForWithFakeTimers();
 
     expect(onChange).toBeCalledTimes(2);
   });