@zat-design/sisyphus-react 4.0.0-beta.3 → 4.0.0-beta.4

package/tests/setup.ts

@@ -0,0 +1,484 @@
+import '@testing-library/jest-dom';
+import 'jest-canvas-mock';
+import React from 'react';
+
+// Ensure JSDOM document.body exists and setup proper DOM environment
+if (typeof document !== 'undefined') {
+  // Ensure documentElement exists
+  if (!document.documentElement) {
+    const html = document.createElement('html');
+    document.appendChild(html);
+  }
+  
+  // Ensure head exists
+  if (!document.head) {
+    const head = document.createElement('head');
+    document.documentElement.appendChild(head);
+  }
+  
+  // Ensure body exists
+  if (!document.body) {
+    const body = document.createElement('body');
+    document.documentElement.appendChild(body);
+  }
+}
+
+// Mock testing library environment setup
+Object.defineProperty(global, 'MutationObserver', {
+  writable: true,
+  value: jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    disconnect: jest.fn(),
+    takeRecords: jest.fn(),
+  })),
+});
+
+// Setup test container div
+beforeEach(() => {
+  if (typeof document !== 'undefined' && document.body) {
+    try {
+      // Clean up any existing test containers
+      const existingContainers = document.querySelectorAll('[data-testid="test-container"]');
+      existingContainers.forEach(container => {
+        if (container.parentNode) {
+          try {
+            container.parentNode.removeChild(container);
+          } catch (e) {
+            // Ignore cleanup errors
+          }
+        }
+      });
+
+      // Create a fresh test container
+      const testContainer = document.createElement('div');
+      testContainer.setAttribute('data-testid', 'test-container');
+      testContainer.id = 'test-container';
+      document.body.appendChild(testContainer);
+    } catch (e) {
+      // Ignore setup errors - React Testing Library will handle this
+    }
+  }
+});
+
+// 抑制控制台错误 - 更新以支持 React 18 警告
+const originalError = console.error;
+beforeAll(() => {
+  console.error = (...args: any[]) => {
+    if (
+      args.find(
+        arg =>
+          typeof arg === 'string' &&
+          (
+            arg.includes('Warning: ReactDOM.render is no longer supported in React 18') ||
+            arg.includes('Warning: ReactDOM.render is deprecated') ||
+            arg.includes('Warning: componentWillReceiveProps') ||
+            arg.includes('validateDOMNesting') ||
+            arg.includes('Warning: componentWillMount') ||
+            arg.includes('Warning: React.createFactory() is deprecated') ||
+            arg.includes('Warning: findDOMNode is deprecated') ||
+            arg.includes('act(...)') ||
+            arg.includes('useLayoutEffect does nothing on the server') ||
+            arg.includes('Invalid hook call') ||
+            arg.includes('Hooks can only be called inside') ||
+            arg.includes('Warning: Each child in a list should have a unique') ||
+            arg.includes('Warning: validateDOMNesting') ||
+            arg.includes('Warning: unmountComponentAtNode is deprecated') ||
+            arg.includes('Warning: `ReactDOMTestUtils.act` is deprecated') ||
+            arg.includes('Warning: React does not recognize the') ||
+            arg.includes('Warning: Invalid DOM property') ||
+            arg.includes('Warning: Received `true` for a non-boolean attribute') ||
+            arg.includes('Warning: Received `false` for a non-boolean attribute')
+          )
+      )
+    ) {
+      return;
+    }
+    originalError.call(console, ...args);
+  };
+});
+
+afterAll(() => {
+  console.error = originalError;
+});
+
+// Mock window APIs
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+// Mock ahooks hooks - 基于ahooks官方测试实践改进
+jest.mock('ahooks', () => ({
+  useSetState: jest.fn((initialState) => {
+    const mockState = { current: initialState || {} };
+    const mockSetState = jest.fn((patch) => {
+      if (typeof patch === 'function') {
+        mockState.current = patch(mockState.current);
+      } else {
+        mockState.current = { ...mockState.current, ...patch };
+      }
+      return mockState.current;
+    });
+    return [mockState.current, mockSetState];
+  }),
+
+  useRequest: jest.fn((service, options = {}) => {
+    const mockState = {
+      loading: false,
+      data: null,
+      error: null,
+      params: [],
+    };
+
+    const mockActions = {
+      run: jest.fn((...params) => {
+        mockState.loading = true;
+        mockState.params = params;
+        // 模拟异步操作
+        setTimeout(() => {
+          mockState.loading = false;
+          mockState.data = 'mock-data';
+        }, 100);
+        return Promise.resolve('mock-data');
+      }),
+      refresh: jest.fn(() => {
+        mockState.loading = true;
+        setTimeout(() => {
+          mockState.loading = false;
+        }, 100);
+        return Promise.resolve('mock-data');
+      }),
+      cancel: jest.fn(() => {
+        mockState.loading = false;
+      }),
+      mutate: jest.fn((data) => {
+        mockState.data = data;
+      }),
+    };
+
+    const result = {
+      ...mockState,
+      ...mockActions,
+    };
+
+    // 如果提供了service函数，模拟调用
+    if (service && typeof service === 'function') {
+      result.run = jest.fn((...params) => {
+        mockState.loading = true;
+        mockState.params = params;
+
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            try {
+              const serviceResult = service(...params);
+              if (serviceResult instanceof Promise) {
+                serviceResult.then(resolve).catch(reject);
+              } else {
+                resolve(serviceResult);
+              }
+            } catch (error) {
+              reject(error);
+            } finally {
+              mockState.loading = false;
+            }
+          }, 100);
+        });
+      });
+    }
+
+    // 处理options
+    if (options.manual !== true) {
+      // 自动执行
+      setTimeout(() => {
+        result.run();
+      }, 0);
+    }
+
+    return result;
+  }),
+
+  useDebounce: jest.fn((value, delay) => value),
+
+  useThrottle: jest.fn((value, delay) => value),
+
+  useLocalStorageState: jest.fn((key, defaultValue) => {
+    const [state, setState] = [defaultValue, jest.fn()];
+    return [state, setState];
+  }),
+
+  useSessionStorageState: jest.fn((key, defaultValue) => {
+    const [state, setState] = [defaultValue, jest.fn()];
+    return [state, setState];
+  }),
+
+  useDeepCompareEffect: jest.fn((effect, deps) => {
+    if (effect && typeof effect === 'function') {
+      effect();
+    }
+  }),
+
+  useUpdateEffect: jest.fn((effect, deps) => {
+    if (effect && typeof effect === 'function') {
+      effect();
+    }
+  }),
+
+  useSize: jest.fn(() => ({ width: 100, height: 100 })),
+
+  useInViewport: jest.fn(() => [true, jest.fn()]),
+
+  useMemoizedFn: jest.fn((fn) => fn),
+
+  useMount: jest.fn((fn) => {
+    if (fn && typeof fn === 'function') {
+      fn();
+    }
+  }),
+
+  useUnmount: jest.fn((fn) => {
+    if (fn && typeof fn === 'function') {
+      fn();
+    }
+  }),
+
+  useDebounceEffect: jest.fn((effect, deps, wait) => {
+    if (effect && typeof effect === 'function') {
+      effect();
+    }
+  }),
+
+  useThrottleEffect: jest.fn((effect, deps, wait) => {
+    if (effect && typeof effect === 'function') {
+      effect();
+    }
+  }),
+}));
+
+Object.defineProperty(window, 'ResizeObserver', {
+  writable: true,
+  value: jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  })),
+});
+
+Object.defineProperty(window, 'IntersectionObserver', {
+  writable: true,
+  value: jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  })),
+});
+
+// Mock getBoundingClientRect
+Element.prototype.getBoundingClientRect = jest.fn(() => ({
+  width: 120,
+  height: 120,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  x: 0,
+  y: 0,
+  toJSON: jest.fn(),
+}));
+
+// Mock scrollIntoView
+Element.prototype.scrollIntoView = jest.fn();
+
+// Mock getComputedStyle
+window.getComputedStyle = jest.fn(() => ({
+  getPropertyValue: jest.fn(() => ''),
+  setProperty: jest.fn(),
+  removeProperty: jest.fn(),
+} as any));
+
+// Mock URL methods
+global.URL.createObjectURL = jest.fn(() => 'mock-url');
+global.URL.revokeObjectURL = jest.fn();
+
+// Mock fetch
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve({}),
+    blob: () => Promise.resolve(new Blob()),
+    text: () => Promise.resolve(''),
+  } as Response)
+);
+
+// Mock String methods to prevent format.match and format.replace errors
+String.prototype.match = String.prototype.match || jest.fn(() => []);
+String.prototype.replace = String.prototype.replace || jest.fn((pattern, replacement) => {
+  if (typeof pattern === 'string') {
+    return this.split(pattern).join(replacement);
+  }
+  return this;
+});
+
+// Mock FileReader
+class MockFileReader {
+  result: any = null;
+  error: any = null;
+  readyState: number = 0;
+  onload: ((this: FileReader, ev: ProgressEvent<FileReader>) => any) | null = null;
+  onerror: ((this: FileReader, ev: ProgressEvent<FileReader>) => any) | null = null;
+  onloadend: ((this: FileReader, ev: ProgressEvent<FileReader>) => any) | null = null;
+
+  readAsDataURL = jest.fn(() => {
+    this.readyState = 2;
+    this.result = 'data:image/png;base64,test';
+    setTimeout(() => {
+      if (this.onload) this.onload({} as ProgressEvent<FileReader>);
+      if (this.onloadend) this.onloadend({} as ProgressEvent<FileReader>);
+    }, 0);
+  });
+
+  readAsText = jest.fn(() => {
+    this.readyState = 2;
+    this.result = 'test content';
+    setTimeout(() => {
+      if (this.onload) this.onload({} as ProgressEvent<FileReader>);
+      if (this.onloadend) this.onloadend({} as ProgressEvent<FileReader>);
+    }, 0);
+  });
+
+  abort = jest.fn();
+  addEventListener = jest.fn();
+  removeEventListener = jest.fn();
+  dispatchEvent = jest.fn();
+}
+
+global.FileReader = MockFileReader as any;
+
+// Mock Blob
+global.Blob = jest.fn().mockImplementation(() => ({
+  size: 1024,
+  type: 'image/png',
+  slice: jest.fn(),
+  stream: jest.fn(),
+  text: jest.fn(() => Promise.resolve('mock text')),
+  arrayBuffer: jest.fn(() => Promise.resolve(new ArrayBuffer(8))),
+}));
+
+// Store original createElement
+const originalCreateElement = document.createElement;
+
+// Simple mock for specific elements only when needed
+document.createElement = jest.fn((tagName: string) => {
+  try {
+    return originalCreateElement.call(document, tagName);
+  } catch (e) {
+    // Fallback for special cases
+    const mockElement = {
+      tagName: tagName.toUpperCase(),
+      style: {},
+      className: '',
+      textContent: '',
+      innerHTML: '',
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+      setAttribute: jest.fn(),
+      getAttribute: jest.fn(),
+      removeAttribute: jest.fn(),
+      appendChild: jest.fn(),
+      removeChild: jest.fn(),
+      insertBefore: jest.fn(),
+      querySelector: jest.fn(),
+      querySelectorAll: jest.fn(() => []),
+      parentNode: null,
+      childNodes: [],
+      children: [],
+    };
+
+    // Add specific properties for different elements
+    if (tagName === 'canvas') {
+      Object.assign(mockElement, {
+        getContext: jest.fn(() => ({
+          drawImage: jest.fn(),
+          getImageData: jest.fn(),
+          putImageData: jest.fn(),
+          toDataURL: jest.fn(() => 'data:image/png;base64,test'),
+        })),
+        toDataURL: jest.fn(() => 'data:image/png;base64,test'),
+        width: 100,
+        height: 100,
+      });
+    } else if (tagName === 'a') {
+      Object.assign(mockElement, {
+        click: jest.fn(),
+        download: '',
+        href: '',
+      });
+    }
+
+    return mockElement as any;
+  }
+});
+
+// Store original methods
+const originalAppendChild = document.body.appendChild;
+const originalRemoveChild = document.body.removeChild;
+
+// Mock but still allow actual functionality for testing
+document.body.appendChild = jest.fn((node) => {
+  try {
+    // Check if node is a valid DOM element
+    if (node && typeof node === 'object' && node.nodeType !== undefined) {
+      return originalAppendChild.call(document.body, node);
+    }
+    // For non-DOM elements, just return the node
+    return node;
+  } catch (e) {
+    // If original fails, just return the node
+    return node;
+  }
+});
+
+document.body.removeChild = jest.fn((node) => {
+  try {
+    // Check if node is a valid DOM element
+    if (node && typeof node === 'object' && node.nodeType !== undefined) {
+      return originalRemoveChild.call(document.body, node);
+    }
+    // For non-DOM elements, just return the node
+    return node;
+  } catch (e) {
+    // If original fails, just return the node
+    return node;
+  }
+});
+
+// Mock getElementsByTagName to prevent ProIcon DOM access issues
+const originalGetElementsByTagName = document.getElementsByTagName;
+document.getElementsByTagName = jest.fn((tagName: string) => {
+  if (tagName === 'script') {
+    // Return empty collection for script tags to prevent ProIcon issues
+    return [];
+  }
+  try {
+    return originalGetElementsByTagName.call(document, tagName);
+  } catch (e) {
+    // Fallback for testing
+    return [];
+  }
+});
+
+// Mock ProIcon to prevent DOM manipulation
+jest.mock('../src/ProIcon', () => ({
+  __esModule: true,
+  default: jest.fn(() => null),
+  ProIcon: jest.fn(() => null),
+}));

package/tests/test-utils.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, RenderOptions } from '@testing-library/react';
+import { ConfigProvider } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+
+// 确保document.body存在
+const ensureDocumentSetup = () => {
+  if (typeof document !== 'undefined') {
+    if (!document.body) {
+      document.body = document.createElement('body');
+      document.documentElement.appendChild(document.body);
+    }
+    
+    // 创建一个测试容器
+    let testContainer = document.getElementById('test-container');
+    if (!testContainer) {
+      testContainer = document.createElement('div');
+      testContainer.id = 'test-container';
+      document.body.appendChild(testContainer);
+    }
+  }
+};
+
+// Mock ProConfigProvider
+const MockProConfigProvider = ({ children }: { children: React.ReactNode }) => {
+  const mockValue = {
+    state: {
+      ProTable: {},
+      ProForm: {},
+      ProEnum: {},
+      ProSelect: {},
+      storage: {},
+      theme: {},
+      locale: {},
+    },
+    setState: jest.fn(),
+  };
+
+  const MockContext = React.createContext(mockValue);
+  return React.createElement(MockContext.Provider, { value: mockValue }, children);
+};
+
+// Mock FieldProvider
+const MockFieldProvider = ({ children }: { children: React.ReactNode }) => {
+  const mockValue = {
+    readonly: false,
+    disabled: false,
+  };
+
+  const MockFieldContext = React.createContext(mockValue);
+  return React.createElement(MockFieldContext.Provider, { value: mockValue }, children);
+};
+
+// All providers wrapper
+const AllTheProviders = ({ children }: { children: React.ReactNode }) => {
+  ensureDocumentSetup();
+  
+  return (
+    <ConfigProvider locale={zhCN}>
+      <MockProConfigProvider>
+        <MockFieldProvider>
+          {children}
+        </MockFieldProvider>
+      </MockProConfigProvider>
+    </ConfigProvider>
+  );
+};
+
+const customRender = (ui: React.ReactElement, options?: Omit<RenderOptions, 'wrapper'>) => {
+  ensureDocumentSetup();
+  
+  return render(ui, { 
+    wrapper: AllTheProviders, 
+    container: document.getElementById('test-container') || document.body,
+    ...options 
+  });
+};
+
+export * from '@testing-library/react';
+export { customRender as render };
+export { AllTheProviders, ensureDocumentSetup };