test: Move all test case into React Testing Libary

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  setupFilesAfterEnv: ['<rootDir>/tests/setup.js']
+};

package.json

@@ -29,7 +29,8 @@
     "now-build": "father doc build --storybook"
   },
   "devDependencies": {
-    "@types/enzyme": "^3.10.5",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.0.0",
     "@types/jest": "^25.2.3",
     "@types/react": "^16.9.3",
     "@types/react-dom": "^16.9.1",
@@ -39,12 +40,11 @@
     "coveralls": "^3.1.0",
     "create-react-class": "^15.6.3",
     "cross-env": "^7.0.2",
-    "enzyme": "^3.10.0",
     "eslint": "^6.6.0",
     "father": "^2.14.0",
     "np": "^6.2.3",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "typescript": "^4.1.3"
   },
   "dependencies": {

tests/Portal.test.tsx

@@ -1,43 +1,43 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import PortalWrapper, { getOpenCount } from '../src/PortalWrapper';
 import Portal from '../src/Portal';
 
 describe('Portal', () => {
-  let container: HTMLDivElement;
+  let domContainer: HTMLDivElement;
 
   // Mock for raf
   window.requestAnimationFrame = callback => window.setTimeout(callback);
   window.cancelAnimationFrame = id => window.clearTimeout(id);
 
   beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
+    domContainer = document.createElement('div');
+    document.body.appendChild(domContainer);
   });
 
   afterEach(() => {
-    document.body.removeChild(container);
+    document.body.removeChild(domContainer);
   });
 
   it('forceRender', () => {
     const divRef = React.createRef<any>();
 
-    const wrapper = mount(
+    const { unmount } = render(
       <PortalWrapper forceRender>
         {() => <div ref={divRef}>2333</div>}
       </PortalWrapper>,
     );
 
     expect(divRef.current).toBeTruthy();
 
-    wrapper.unmount();
+    unmount();
   });
 
   it('didUpdate', () => {
     const didUpdate = jest.fn();
 
-    const wrapper = mount(
+    const { rerender } = render(
       <Portal
         didUpdate={didUpdate}
         getContainer={() => document.createElement('div')}
@@ -48,7 +48,15 @@ describe('Portal', () => {
 
     expect(didUpdate).toHaveBeenCalledTimes(1);
 
-    wrapper.setProps({ justForceUpdate: true });
+    rerender(
+      <Portal
+        didUpdate={didUpdate}
+        getContainer={() => document.createElement('div')}
+        {...{ justForceUpdate: true }}
+      >
+        light
+      </Portal>,
+    );
     expect(didUpdate).toHaveBeenCalledTimes(2);
   });
 
@@ -58,7 +66,7 @@ describe('Portal', () => {
       div.id = 'bamboo-light';
       document.body.appendChild(div);
 
-      mount(
+      render(
         <PortalWrapper visible getContainer="#bamboo-light">
           {() => <div>2333</div>}
         </PortalWrapper>,
@@ -74,7 +82,7 @@ describe('Portal', () => {
     it('function', () => {
       const div = document.createElement('div');
 
-      mount(
+      render(
         <PortalWrapper visible getContainer={() => div}>
           {() => <div>2333</div>}
         </PortalWrapper>,
@@ -86,7 +94,7 @@ describe('Portal', () => {
     it('htmlElement', () => {
       const div = document.createElement('div');
 
-      mount(
+      render(
         <PortalWrapper visible getContainer={div}>
           {() => <div>2333</div>}
         </PortalWrapper>,
@@ -98,7 +106,7 @@ describe('Portal', () => {
     it('delay', () => {
       jest.useFakeTimers();
       const divRef = React.createRef<HTMLDivElement>();
-      const wrapper = mount(
+      render(
         <div>
           <PortalWrapper visible getContainer={() => divRef.current}>
             {() => <div />}
@@ -109,7 +117,6 @@ describe('Portal', () => {
 
       act(() => {
         jest.runAllTimers();
-        wrapper.update();
       });
 
       expect(divRef.current.childElementCount).toEqual(1);
@@ -121,15 +128,15 @@ describe('Portal', () => {
     it('start as 0', () => {
       expect(getOpenCount()).toEqual(0);
 
-      const wrapper = mount(
+      const { rerender, unmount } = render(
         <PortalWrapper visible={false}>{() => <div>2333</div>}</PortalWrapper>,
       );
       expect(getOpenCount()).toEqual(0);
 
-      wrapper.setProps({ visible: true });
+      rerender(<PortalWrapper visible>{() => <div>2333</div>}</PortalWrapper>);
       expect(getOpenCount()).toEqual(1);
 
-      wrapper.unmount();
+      unmount();
     });
 
     it('correct count', () => {
@@ -153,29 +160,33 @@ describe('Portal', () => {
 
       expect(getOpenCount()).toEqual(0);
 
-      const wrapper = mount(<Demo count={1} visible />);
+      const { rerender } = render(<Demo count={1} visible />);
       expect(getOpenCount()).toEqual(1);
 
-      wrapper.setProps({ count: 2 });
+      rerender(<Demo count={2} visible />);
       expect(getOpenCount()).toEqual(2);
 
-      wrapper.setProps({ count: 1 });
+      rerender(<Demo count={1} visible />);
       expect(getOpenCount()).toEqual(1);
 
-      wrapper.setProps({ visible: false });
+      rerender(<Demo count={1} visible={false} />);
       expect(getOpenCount()).toEqual(0);
     });
   });
 
   it('wrapperClassName', () => {
-    const wrapper = mount(
+    const { rerender } = render(
       <PortalWrapper visible wrapperClassName="bamboo">
         {() => <div />}
       </PortalWrapper>,
     );
-    expect((wrapper.instance() as any).container.className).toEqual('bamboo');
+    expect(document.body.querySelector('.bamboo')).toBeTruthy();
 
-    wrapper.setProps({ wrapperClassName: 'light' });
-    expect((wrapper.instance() as any).container.className).toEqual('light');
+    rerender(
+      <PortalWrapper visible wrapperClassName="light">
+        {() => <div />}
+      </PortalWrapper>,
+    );
+    expect(document.body.querySelector('.light')).toBeTruthy();
   });
 });

tests/hooks.test.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { render, fireEvent } from '@testing-library/react';
 import useMemo from '../src/hooks/useMemo';
 import useMergedState from '../src/hooks/useMergedState';
 import useLayoutEffect from '../src/hooks/useLayoutEffect';
@@ -13,20 +13,20 @@ describe('hooks', () => {
         [open, data],
         (prev, next) => next[0] && prev[1] !== next[1],
       );
-      return <div memoData={memoData} />;
+      return <div>{memoData}</div>;
     };
 
-    const wrapper = mount(<FC data="open" open />);
-    expect(wrapper.find('div').props().memoData).toEqual('open');
+    const { container, rerender } = render(<FC data="open" open />);
+    expect(container.querySelector('div').textContent).toEqual('open');
 
-    wrapper.setProps({ data: 'again' });
-    expect(wrapper.find('div').props().memoData).toEqual('again');
+    rerender(<FC data="again" open />);
+    expect(container.querySelector('div').textContent).toEqual('again');
 
-    wrapper.setProps({ data: 'close', open: false });
-    expect(wrapper.find('div').props().memoData).toEqual('again');
+    rerender(<FC data="close" open={false} />);
+    expect(container.querySelector('div').textContent).toEqual('again');
 
-    wrapper.setProps({ data: 'repeat', open: true });
-    expect(wrapper.find('div').props().memoData).toEqual('repeat');
+    rerender(<FC data="repeat" open />);
+    expect(container.querySelector('div').textContent).toEqual('repeat');
   });
 
   describe('useMergedState', () => {
@@ -43,19 +43,18 @@ describe('hooks', () => {
     };
 
     it('still control of to undefined', () => {
-      const wrapper = mount(<FC value="test" />);
+      const { container, rerender } = render(<FC value="test" />);
 
-      expect(wrapper.find('input').props().value).toEqual('test');
+      expect(container.querySelector('input').value).toEqual('test');
 
-      wrapper.setProps({ value: undefined });
-      wrapper.update();
-      expect(wrapper.find('input').props().value).toEqual(undefined);
+      rerender(<FC value={undefined} />);
+      expect(container.querySelector('input').value).toEqual('test');
     });
 
     it('correct defaultValue', () => {
-      const wrapper = mount(<FC defaultValue="test" />);
+      const { container } = render(<FC defaultValue="test" />);
 
-      expect(wrapper.find('input').props().value).toEqual('test');
+      expect(container.querySelector('input').value).toEqual('test');
     });
 
     it('not rerender when setState as deps', () => {
@@ -74,8 +73,8 @@ describe('hooks', () => {
         return <div>{val}</div>;
       };
 
-      const wrapper = mount(<Test />);
-      expect(wrapper.text()).toEqual('1');
+      const { container } = render(<Test />);
+      expect(container.firstChild.textContent).toEqual('1');
     });
   });
 
@@ -104,14 +103,18 @@ describe('hooks', () => {
         .spyOn(console, 'error')
         .mockImplementation(() => {});
 
-      const wrapper = mount(<FC defaultValue="test" />);
-      expect(wrapper.find('label').props().children).toEqual('testa');
-      wrapper.find('input').simulate('change', { target: { value: '1' } });
-      wrapper.update();
-      expect(wrapper.find('label').props().children).toEqual('1a');
-      wrapper.find('input').simulate('change', { target: { value: '2' } });
-      wrapper.update();
-      expect(wrapper.find('label').props().children).toEqual('2a');
+      const { container } = render(<FC defaultValue="test" />);
+      expect(container.querySelector('label').textContent).toEqual('testa');
+
+      fireEvent.change(container.querySelector('input'), {
+        target: { value: '1' },
+      });
+      expect(container.querySelector('label').textContent).toEqual('1a');
+
+      fireEvent.change(container.querySelector('input'), {
+        target: { value: '2' },
+      });
+      expect(container.querySelector('label').textContent).toEqual('2a');
 
       expect(errorSpy).not.toHaveBeenCalled();
       errorSpy.mockRestore();
@@ -137,16 +140,17 @@ describe('hooks', () => {
         return null;
       };
 
-      const wrapper = mount(<Demo />);
-      wrapper.unmount();
+      const { unmount } = render(<Demo />);
+      unmount();
 
       setTimeout(() => {
         expect(errorSpy).not.toHaveBeenCalled();
         done();
       }, 50);
     });
 
-    it('throw', done => {
+    // This test no need in React 18 anymore
+    it.skip('throw', done => {
       const errorSpy = jest.spyOn(console, 'error');
 
       const Demo = () => {
@@ -164,8 +168,8 @@ describe('hooks', () => {
         return null;
       };
 
-      const wrapper = mount(<Demo />);
-      wrapper.unmount();
+      const { unmount } = render(<Demo />);
+      unmount();
 
       setTimeout(() => {
         expect(errorSpy).toHaveBeenCalled();

tests/index.test.js

@@ -26,6 +26,7 @@ describe('rc-util', () => {
     expect(ret).toEqual([1, 2, 3]);
   });
 
+  // Note: Seems useless but not remove in case some code still use it
   it('PureRenderMixin works', () => {
     const div = document.createElement('div');
     document.body.appendChild(div);