fix: React 18 use createRoot instead (#203)

* chore: replace with react compitable render

* test: part test case

* test: more test case

* test: hooks test

Author: zombieJ

jest.config.js

@@ -1,3 +1,4 @@
 module.exports = {
+  setupFilesAfterEnv: ['<rootDir>/tests/setup.js'],
   snapshotSerializers: [require.resolve("enzyme-to-json/serializer")]
 };

package.json

@@ -49,11 +49,13 @@
     "react-dom": ">=16.9.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.0.1",
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.7",
     "@types/jest": "^26.0.4",
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.7",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "cross-env": "^7.0.0",
     "dumi": "^1.1.7",
     "enzyme": "^3.3.0",
@@ -63,14 +65,14 @@
     "gh-pages": "^3.1.0",
     "less": "^3.10.3",
     "np": "^6.0.0",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "typescript": "^4.0.5"
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
     "classnames": "2.x",
     "rc-motion": "^2.2.0",
-    "rc-util": "^5.0.1"
+    "rc-util": "^5.20.1"
   }
 }

src/Notification.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Component } from 'react';
 import type { ReactText } from 'react';
-import ReactDOM from 'react-dom';
+import { render, unmount } from 'rc-util/lib/React/render';
 import classNames from 'classnames';
 import { CSSMotionList } from 'rc-motion';
 import type { NoticeProps } from './Notice';
@@ -260,7 +260,7 @@ Notification.newInstance = function newNotificationInstance(properties, callback
       },
       component: notification,
       destroy() {
-        ReactDOM.unmountComponentAtNode(div);
+        unmount(div);
         if (div.parentNode) {
           div.parentNode.removeChild(div);
         }
@@ -279,7 +279,7 @@ Notification.newInstance = function newNotificationInstance(properties, callback
     return;
   }
 
-  ReactDOM.render(<Notification {...props} ref={ref} />, div);
+  render(<Notification {...props} ref={ref} />, div);
 };
 
 export default Notification;

tests/hooks.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { ReactWrapper } from 'enzyme';
-import { mount } from 'enzyme';
+import { render, fireEvent } from '@testing-library/react';
 import Notification from '../src';
 import type { NotificationInstance } from '../src/Notification';
 
@@ -18,11 +17,11 @@ describe('Notification.Hooks', () => {
 
     const Context = React.createContext({ name: 'light' });
 
-    let wrapper: ReactWrapper;
+    let container: HTMLElement;
     Notification.newInstance(
       {
         TEST_RENDER: (node: React.ReactElement) => {
-          wrapper = mount(<div>{node}</div>);
+          ({ container } = render(<div>{node}</div>));
         },
       } as any,
       (notification) => {
@@ -54,26 +53,27 @@ describe('Notification.Hooks', () => {
       );
     };
 
-    const demo = mount(<Demo />);
-    demo.find('button').simulate('click');
+    const { container: demoContainer } = render(<Demo />);
+    fireEvent.click(demoContainer.querySelector('button'));
 
     await timeout(10);
-    expect(demo.find('.context-content').text()).toEqual('bamboo');
+    expect(container.querySelector('.context-content').textContent).toEqual('bamboo');
 
     await timeout(1000);
-    expect(wrapper.find('Notification').state().notices).toHaveLength(0);
+    expect(container.querySelectorAll('.rc-notification-notice')).toHaveLength(0);
 
     instance.destroy();
   });
 
   it('key replace', async () => {
     let instance: NotificationInstance;
 
-    let wrapper: ReactWrapper;
+    let container: HTMLElement;
+    let unmount: () => void;
     Notification.newInstance(
       {
         TEST_RENDER: (node: React.ReactElement) => {
-          wrapper = mount(<div>{node}</div>);
+          ({ container, unmount } = render(<div>{node}</div>));
         },
       } as any,
       (notification) => {
@@ -110,17 +110,17 @@ describe('Notification.Hooks', () => {
       );
     };
 
-    const demo = mount(<Demo />);
-    demo.find('button').simulate('click');
+    const { container: demoContainer } = render(<Demo />);
+    fireEvent.click(demoContainer.querySelector('button'));
 
     await timeout(10);
-    expect(demo.find('.context-content').text()).toEqual('light');
+    expect(container.querySelector('.context-content').textContent).toEqual('light');
 
     await timeout(600);
-    expect(demo.find('.context-content').text()).toEqual('bamboo');
+    expect(container.querySelector('.context-content').textContent).toEqual('bamboo');
 
     instance.destroy();
 
-    wrapper.unmount();
+    unmount();
   });
 });