feat: bump react'version to 18.x (#774)

Author: mortalYoung

.storybook/main.js

@@ -10,4 +10,8 @@ module.exports = {
     typescript: {
         reactDocgen: 'none',
     },
+    features: {
+        postcss: false,
+        babelModeV7: true,
+    },
 };

jest.config.js

@@ -14,6 +14,12 @@ module.exports = {
     testPathIgnorePatterns: ['/node_modules/', 'esm', 'umd', 'stories'],
     // The directory where Jest should output its coverage files
     coverageDirectory: 'coverage',
+    collectCoverageFrom: [
+        'src/**/*.{ts,tsx}',
+        '!src/molecule.api.ts',
+        '!src/index.ts',
+        '!src/extensions/**',
+    ],
     transformIgnorePatterns: ['node_modules/(?!(monaco-editor|.*dnd.*)/)'],
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
     moduleNameMapper: {

mock/monacoMock.js

@@ -9,6 +9,9 @@ module.exports = {
         setTheme: function (theme) {},
         create: function (dom, options, override) {},
     },
+    Uri: {
+        parse: function () {},
+    },
     KeyMod: {},
     KeyCode: {},
 };

package.json

@@ -38,18 +38,16 @@
     "license": "MIT",
     "dependencies": {
         "@dtinsight/dt-utils": "^1.0.3",
-        "@types/react": "^17.0.3",
-        "@types/react-dom": "^17.0.3",
         "@vscode/codicons": "^0.0.26",
         "immutability-helper": "^3.1.1",
         "lodash": "^4.17.21",
         "monaco-editor": "^0.30.1",
-        "rc-dialog": "8.2.1",
+        "rc-dialog": "^8.9.0",
         "rc-textarea": "~0.3.1",
         "rc-tooltip": "^5.1.1",
-        "rc-util": "~5.5.0",
-        "react-dnd": "14.0.0",
-        "react-dnd-html5-backend": "14.0.0",
+        "rc-util": "^5.22.5",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
         "react-scrollbars-custom": "^4.0.25",
         "reflect-metadata": "^0.1.13",
         "tsyringe": "4.5.0"
@@ -64,17 +62,17 @@
         "@babel/preset-typescript": "^7.12.16",
         "@commitlint/cli": "^11.0.0",
         "@commitlint/config-conventional": "^11.0.0",
-        "@storybook/addon-actions": "6.1.10",
-        "@storybook/addon-knobs": "^6.1.10",
-        "@storybook/addon-links": "6.1.10",
-        "@storybook/addon-notes": "^5.3.21",
-        "@storybook/addons": "6.1.10",
-        "@storybook/react": "6.1.10",
-        "@testing-library/jest-dom": "^5.14.1",
-        "@testing-library/react": "^11.2.5",
+        "@storybook/addon-actions": "6.5.9",
+        "@storybook/addon-links": "6.5.9",
+        "@storybook/addons": "6.5.9",
+        "@storybook/react": "6.5.9",
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/react": "^13.0.0",
         "@types/jest": "^26.0.0",
         "@types/lodash": "^4.14.172",
-        "@types/react-test-renderer": "^17.0.1",
+        "@types/react": "^18.0.15",
+        "@types/react-dom": "^18.0.6",
+        "@types/react-test-renderer": "^18.0.0",
         "@typescript-eslint/eslint-plugin": "^3.1.0",
         "@typescript-eslint/parser": "^3.1.0",
         "babel-loader": "^8.2.2",
@@ -96,7 +94,9 @@
         "node-sass-alias-importer": "^1.0.2",
         "prettier": "^2.1.2",
         "pretty-quick": "^3.1.0",
-        "react-test-renderer": "^16.14.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-test-renderer": "^18.2.0",
         "rimraf": "^3.0.2",
         "sass": "^1.26.10",
         "sass-loader": "^10.0.2",

src/components/collapse/__tests__/index.test.tsx

@@ -113,17 +113,20 @@ describe('Test The Collapse Component', () => {
         expect(mockResize).toBeCalled();
         expect(mockResize.mock.calls[0][0]).toEqual([26, 26, 26]);
 
+        // collapsing mock2 and mock3
+        await act(async () => {
+            fireEvent.click(collaspeItem?.childNodes[0]!);
+            await sleep(300);
+        });
+
         await act(async () => {
-            // collapsing mock2 and mock3
             const mock3 = container.querySelector(
                 'div[data-collapse-id="mock3"]'
             );
-            fireEvent.click(collaspeItem?.childNodes[0]!);
-            await sleep(300);
             fireEvent.click(mock3?.childNodes[0]!);
-
             await sleep(300);
         });
+
         expect(mockResize).toBeCalled();
         // divided the remaining space by grow number
         expect(mockResize.mock.calls[2][0]).toEqual([26, 316, 158]);
@@ -151,11 +154,14 @@ describe('Test The Collapse Component', () => {
             const mock2 = container.querySelector(
                 'div[data-collapse-id="mock2"]'
             );
+            fireEvent.click(mock2?.childNodes[0]!);
+            await sleep(300);
+        });
+
+        await act(async () => {
             const mock3 = container.querySelector(
                 'div[data-collapse-id="mock3"]'
             );
-            fireEvent.click(mock2?.childNodes[0]!);
-            await sleep(300);
             fireEvent.click(mock3?.childNodes[0]!);
             await sleep(300);
         });
@@ -326,6 +332,9 @@ describe('Test The Collapse Component', () => {
             // collapsing it
             fireEvent.click(mock1?.childNodes[0]!);
             await sleep(300);
+        });
+
+        await act(async () => {
             // @ts-ignore
             HTMLElement.prototype.getBoundingClientRect = () => ({
                 height: 100,
@@ -335,6 +344,7 @@ describe('Test The Collapse Component', () => {
             fireEvent.click(mock1?.childNodes[0]!);
             await sleep(300);
         });
+
         expect(mock1?.parentElement?.style.height).toBe('126px');
     });
 
@@ -384,6 +394,9 @@ describe('Test The Collapse Component', () => {
         await act(async () => {
             fireEvent.click(mock2?.childNodes[0]!);
             await sleep(300);
+        });
+
+        await act(async () => {
             fireEvent.click(mock3?.childNodes[0]!);
             await sleep(300);
         });

src/components/contextMenu/__tests__/contextMenu.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { IContextMenu, useContextMenu } from '../index';
+import { act } from 'react-test-renderer';
 
 describe('Test ContextMenu Component', () => {
     const container = render(<div data-testid="anchor"></div>);
@@ -17,27 +18,35 @@ describe('Test ContextMenu Component', () => {
     });
 
     test('Test the useContextMenu method', () => {
-        contextMenu = useContextMenu({
-            anchor: anchorEle,
-            render() {
-                return <span data-testid="menuitem">Test context menu</span>;
-            },
+        act(() => {
+            contextMenu = useContextMenu({
+                anchor: anchorEle,
+                render() {
+                    return (
+                        <span data-testid="menuitem">Test context menu</span>
+                    );
+                },
+            });
         });
         expect(contextMenu).not.toBeUndefined();
     });
 
     test('Test the useContextMenu show method', () => {
-        contextMenu?.show({
-            x: anchorEle.offsetTop,
-            y: anchorEle.offsetLeft,
+        act(() => {
+            contextMenu?.show({
+                x: anchorEle.offsetTop,
+                y: anchorEle.offsetLeft,
+            });
         });
         const content = container.getByTestId('menuitem');
         expect(content).not.toBeUndefined();
         expect(contextMenu?.view?.style.visibility).toEqual('visible');
     });
 
     test('Test the useContextMenu hide method', () => {
-        contextMenu?.hide();
+        act(() => {
+            contextMenu?.hide();
+        });
         expect(contextMenu?.view?.style.visibility).toEqual('hidden');
     });
 });