chore: optimize test cases and documentation

Author: JarvisArt

.umirc.ts

@@ -2,7 +2,7 @@
 import { defineConfig } from 'dumi';
 
 export default defineConfig({
-  title: 'rc-util',
+  title: 'rc-mutate-observer',
   favicon: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
   logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
   outputPath: '.doc',

README.md

@@ -55,4 +55,4 @@ We use typescript to create the Type definition. You can view directly in IDE. B
 | Prop     | Description                                                                                                      | Type                 | Default |
 | -------- | ---------------------------------------------------------------------------------------------------------------- | -------------------- | ------- |
 | onMutate | A function which will be called on each DOM change that qualifies given the observed node or subtree and options | MutationCallback     | -       |
-| options  | An object providing options that describe which DOM mutations should be reported to mutationObserver's callback  | MutationObserverInit | -       |
+| options  | An object providing options that describe which DOM mutations should be reported to mutationObserver's callback  | MutationObserverInit | { subtree: `true`, childList: `true`, attributeFilter: `['style', 'class']` } |

docs/examples/basic.tsx

@@ -1,12 +1,12 @@
 import MutateObserver from '../../src';
-import React, { useCallback } from 'react';
+import React from 'react';
 
 const App: React.FC = () => {
   const [flag, setFlag] = React.useState<boolean>(true);
 
-  const onMutate = useCallback((mutations: MutationRecord[]) => {
+  const onMutate = (mutations: MutationRecord[]) => {
     console.log(mutations);
-  }, []);
+  };
 
   return (
     <MutateObserver onMutate={onMutate}>

package.json

@@ -36,8 +36,8 @@
     "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
     "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
     "start": "dumi dev",
-    "test": "umi-test",
-    "test:coverage": "npm run test --coverage",
+    "test": "rc-test",
+    "test:coverage": "rc-test --coverage",
     "watch": "father dev"
   },
   "dependencies": {
@@ -59,10 +59,10 @@
     "gh-pages": "^3.1.0",
     "np": "^5.0.3",
     "prettier": "^2.1.2",
+    "rc-test": "^7.0.14",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "typescript": "^4.6.3",
-    "umi-test": "^1.9.7"
+    "typescript": "^4.6.3"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

src/index.tsx

@@ -6,14 +6,14 @@ import useEvent from 'rc-util/lib/hooks/useEvent';
 import DomWrapper from './wrapper';
 import type { MutationObserverProps } from './interface';
 
-const defOptions: MutationObserverInit = {
+const defaultOptions: MutationObserverInit = {
   subtree: true,
   childList: true,
   attributeFilter: ['style', 'class'],
 };
 
 const MutateObserver: React.FC<MutationObserverProps> = props => {
-  const { children, options = defOptions, onMutate = () => {} } = props;
+  const { children, options = defaultOptions, onMutate = () => {} } = props;
 
   const callback = useEvent(onMutate);
 

tests/index.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import MutateObserver from '../src';
 
 describe('MutateObserver', () => {
-  it('MutateObserver should support onMutate', () => {
+  it('MutateObserver should support onMutate', async () => {
     const fn = jest.fn();
     const Demo: React.FC = () => {
       const [flag, setFlag] = React.useState<boolean>(true);
@@ -20,11 +20,7 @@ describe('MutateObserver', () => {
     };
     const { container, unmount } = render(<Demo />);
     fireEvent.click(container.querySelector('button')!);
-    if ('MutationObserver' in window) {
-      expect(fn).toHaveBeenCalled();
-    } else {
-      expect(fn).not.toHaveBeenCalled();
-    }
+    await waitFor(() => expect(fn).toHaveBeenCalled());
     unmount();
   });