feat: Enable disable port in test env

Author: zombieJ

src/Portal.tsx

@@ -1,22 +1,39 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
+import canUseDom from 'rc-util/lib/Dom/canUseDom';
 import OrderContext from './Context';
 import useDom from './useDom';
 import useScrollLocker from './useScrollLocker';
+import { inlineMock } from './mock';
 
-// ZombieJ: Since React 18 strict mode logic change.
-//          We should rewrite for compatible.
+export type ContainerType = Element | DocumentFragment;
+
+export type GetContainer = string | ContainerType | (() => ContainerType);
 
 export interface PortalProps {
   /** Customize container element. Default will create a div in document.body when `open` */
-  getContainer?: () => Element | DocumentFragment;
+  getContainer?: GetContainer;
   children?: React.ReactNode;
   /** Show the portal children */
   open?: boolean;
   /** Lock screen scroll when open */
   autoLock?: boolean;
 }
 
+const getPortalContainer = (getContainer: GetContainer) => {
+  if (!canUseDom()) {
+    return null;
+  }
+
+  if (typeof getContainer === 'string') {
+    return document.querySelector(getContainer);
+  }
+  if (typeof getContainer === 'function') {
+    return getContainer();
+  }
+  return getContainer;
+};
+
 export default function Portal(props: PortalProps) {
   const { open, autoLock, getContainer, children } = props;
 
@@ -30,7 +47,7 @@ export default function Portal(props: PortalProps) {
   }, [open]);
 
   // ======================== Container ========================
-  const customizeContainer = getContainer?.();
+  const customizeContainer = getPortalContainer(getContainer);
 
   const [defaultContainer, queueCreate] = useDom(
     mergedRender && !customizeContainer,
@@ -39,13 +56,14 @@ export default function Portal(props: PortalProps) {
 
   // ========================= Render ==========================
   // Do not render when nothing need render
-  if (!mergedRender) {
+  if (!mergedRender || !canUseDom()) {
     return null;
   }
 
+  console.log(inlineMock());
   return (
     <OrderContext.Provider value={queueCreate}>
-      {createPortal(children, mergedContainer)}
+      {inlineMock() ? children : createPortal(children, mergedContainer)}
     </OrderContext.Provider>
   );
 }

src/index.tsx

@@ -1,6 +1,8 @@
 import Portal from './Portal';
 import type { PortalProps } from './Portal';
+import { inlineMock } from './mock';
 
 export type { PortalProps };
+export { inlineMock };
 
 export default Portal;

src/mock.ts

@@ -0,0 +1,8 @@
+export let inline = false;
+
+export function inlineMock(nextInline?: boolean) {
+  if (typeof nextInline === 'boolean') {
+    inline = nextInline;
+  }
+  return inline;
+}

tests/__snapshots__/testEnv.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Env inlineMock 1`] = `
+<div>
+  Start
+  <div
+    class="bamboo"
+  >
+    Hello World
+  </div>
+  End
+</div>
+`;

tests/setupAfterEnv.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

tests/ssr.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Portal from '../src';
+
+jest.mock('rc-util/lib/Dom/canUseDom', () => () => false);
+
+describe('SSR', () => {
+  it('No Render in SSR', () => {
+    const { unmount } = render(
+      <Portal open>
+        <div className="bamboo">Hello World</div>
+      </Portal>,
+    );
+
+    expect(document.querySelector('.bamboo')).toBeFalsy();
+
+    unmount();
+  });
+});

tests/testEnv.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Portal, { inlineMock } from '../src';
+
+describe('Test Env', () => {
+  it('inlineMock', () => {
+    inlineMock(true);
+
+    const { container } = render(
+      <>
+        Start
+        <Portal open>
+          <div className="bamboo">Hello World</div>
+        </Portal>
+        End
+      </>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});