fix: update React app tests

twilio-labs · Nov 30, 2022 · a9bb6de · a9bb6de
1 parent c27d8d6
commit a9bb6de
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 33 deletions.
diff --git a/.github/workflows/on_pull_request.yml b/.github/workflows/on_pull_request.yml
@@ -156,7 +156,7 @@ jobs:
         run: yarn lint
 
   tests:
-    name: Test repository using React 17
+    name: Test repository using React 18
     needs: build
     runs-on: ubuntu-latest
     steps:

diff --git a/packages/paste-cra-template/template/src/index.tsx b/packages/paste-cra-template/template/src/index.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 import {BrowserRouter, Route, Routes, Link} from 'react-router-dom';
 import {Stack} from '@twilio-paste/core/stack';
 
@@ -41,11 +41,11 @@ export const Index = (): JSX.Element => {
 
 Index.displayName = 'Index';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.querySelector('#root') as HTMLElement);
+root.render(
   <React.StrictMode>
     <Index />
-  </React.StrictMode>,
-  document.querySelector('#root')
+  </React.StrictMode>
 );
 
 /**

diff --git a/packages/paste-customization/__tests__/CustomizationProvider.test.tsx b/packages/paste-customization/__tests__/CustomizationProvider.test.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 import {render, screen} from '@testing-library/react';
 
 import {CustomizationProvider, CustomizationConsumer} from '../src';
@@ -51,7 +51,8 @@ const BaseThemeConsumerExample: React.FC<React.PropsWithChildren<BaseThemeConsum
 
 describe('CustomizationProvider', () => {
   it('should render without crashing', (): void => {
-    ReactDOM.render(<CustomizationProvider />, document.createElement('div'));
+    const root = ReactDOM.createRoot(document.querySelector('div') as HTMLElement);
+    root.render(<CustomizationProvider />);
   });
 
   it('should inherit one of two base themes', () => {

diff --git a/packages/paste-customization/src/CustomizationConsumer.tsx b/packages/paste-customization/src/CustomizationConsumer.tsx
@@ -7,7 +7,7 @@ export interface CustomizationConsumerProps {
   children: ({theme}: {theme: CustomTheme}) => React.ReactNode;
 }
 
-export const CustomizationConsumer: React.FC<React.PropsWithChildren<CustomizationConsumerProps>> = (props) => {
+export const CustomizationConsumer: React.FC<CustomizationConsumerProps> = (props) => {
   return <Theme.Consumer {...props} />;
 };
 

diff --git a/packages/paste-theme/__tests__/themeConsumer.spec.tsx b/packages/paste-theme/__tests__/themeConsumer.spec.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 import {render} from '@testing-library/react';
 
 import {Theme} from '../src';
@@ -10,11 +10,11 @@ const ThemeConsumerExampleComponent = (): React.ReactElement => {
 
 describe('Theme.Consumer', () => {
   it('should render without crashing', (): void => {
-    ReactDOM.render(
+    const root = ReactDOM.createRoot(document.querySelector('div') as HTMLElement);
+    root.render(
       <Theme.Provider theme="default">
         <ThemeConsumerExampleComponent />
-      </Theme.Provider>,
-      document.createElement('div')
+      </Theme.Provider>
     );
   });
 

diff --git a/packages/paste-theme/__tests__/themeProvider.spec.tsx b/packages/paste-theme/__tests__/themeProvider.spec.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 import {render} from '@testing-library/react';
 
 import {Theme} from '../src';
@@ -18,7 +18,8 @@ const ThemeConsumerExampleTextColor = (): React.ReactElement => {
 
 describe('Theme.Provider', () => {
   it('should render without crashing', (): void => {
-    ReactDOM.render(<Theme.Provider />, document.createElement('div'));
+    const root = ReactDOM.createRoot(document.querySelector('div') as HTMLElement);
+    root.render(<Theme.Provider />);
   });
 
   it('should render the sendgrid link text color', (): void => {

diff --git a/packages/paste-theme/__tests__/useTheme.spec.tsx b/packages/paste-theme/__tests__/useTheme.spec.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 import {render} from '@testing-library/react';
 
 import {Theme, useTheme} from '../src';
@@ -11,11 +11,11 @@ const HookExampleComponent = (): React.ReactElement => {
 
 describe('useTheme', () => {
   it('should render without crashing', (): void => {
-    ReactDOM.render(
+    const root = ReactDOM.createRoot(document.querySelector('div') as HTMLElement);
+    root.render(
       <Theme.Provider theme="default">
         <HookExampleComponent />
-      </Theme.Provider>,
-      document.createElement('div')
+      </Theme.Provider>
     );
   });
 

diff --git a/packages/paste-theme/__tests__/withTheme.spec.tsx b/packages/paste-theme/__tests__/withTheme.spec.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 import {render} from '@testing-library/react';
 
 import type {ThemeShape} from '../src';
@@ -10,11 +10,11 @@ const MockComponentWithTheme = withTheme(MockComponent);
 
 describe('withTheme', () => {
   it('should render without crashing', (): void => {
-    ReactDOM.render(
+    const root = ReactDOM.createRoot(document.querySelector('div') as HTMLElement);
+    root.render(
       <Theme.Provider theme="default">
         <MockComponentWithTheme />
-      </Theme.Provider>,
-      document.createElement('div')
+      </Theme.Provider>
     );
   });
 

diff --git a/packages/paste-token-contrast-checker/src/index.tsx b/packages/paste-token-contrast-checker/src/index.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import {IndexPage} from './pages/IndexPage';
@@ -12,11 +12,11 @@ export const Index = (): JSX.Element => {
   );
 };
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.querySelector('#root') as HTMLElement);
+root.render(
   <React.StrictMode>
     <Index />
-  </React.StrictMode>,
-  document.querySelector('#root')
+  </React.StrictMode>
 );
 
 /**