add test case

Author: li-jia-nan

src/index.tsx

@@ -18,12 +18,21 @@ const MutateObserver: React.FC<MutationObserverProps> = props => {
 
   const canRef = React.isValidElement(children) && supportRef(children);
 
+  const originRef: React.RefObject<HTMLElement> = canRef
+    ? (children as any)?.ref
+    : null;
+
   useEffect(() => {
     if (!canUseDom()) {
       return;
     }
+
     let instance: MutationObserver;
-    const currentElement = findDOMNode(wrapperRef.current!);
+
+    const currentElement = findDOMNode(
+      originRef?.current || wrapperRef?.current,
+    );
+
     if (currentElement && 'MutationObserver' in window) {
       instance = new MutationObserver(onMutate);
       instance.observe(currentElement, options);
@@ -32,7 +41,7 @@ const MutateObserver: React.FC<MutationObserverProps> = props => {
       instance?.takeRecords();
       instance?.disconnect();
     };
-  }, [options, onMutate]);
+  }, [options, originRef, onMutate]);
 
   if (!children) {
     if (process.env.NODE_ENV !== 'production') {

tests/index.test.tsx

@@ -29,12 +29,32 @@ describe('MutateObserver', () => {
   });
 });
 
-it('StrictMode', () => {
-  const { container } = render(
-    <MutateObserver>
-      <div>test</div>
-    </MutateObserver>,
-    { wrapper: React.StrictMode },
-  );
-  expect(container).toMatchSnapshot();
+it('findDOMNode should not error in React.StrictMode', () => {
+  const fn = jest.fn();
+  const buttonRef = React.createRef<HTMLButtonElement>();
+  const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  const Demo = React.forwardRef<
+    HTMLButtonElement,
+    React.HTMLAttributes<HTMLButtonElement>
+  >((props, ref) => {
+    const [flag, setFlag] = React.useState<boolean>(true);
+    return (
+      <React.StrictMode>
+        <MutateObserver onMutate={fn}>
+          <button
+            {...props}
+            ref={ref}
+            className={flag ? 'aaa' : 'bbb'}
+            onClick={() => setFlag(!flag)}
+          >
+            click
+          </button>
+        </MutateObserver>
+      </React.StrictMode>
+    );
+  });
+  const { container } = render(<Demo ref={buttonRef} />);
+  fireEvent.click(container.querySelector('button')!);
+  expect(warnSpy).not.toHaveBeenCalled();
+  warnSpy.mockRestore();
 });