add jest

Author: xlorne

jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+    moduleNameMapper: {
+        '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    },
+    setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+};

jest.setup.ts

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

jest/ComponentBus.test.tsx

@@ -0,0 +1,25 @@
+import '@testing-library/jest-dom';
+import * as React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ComponentBus } from '../src';
+import MyButton, { MyButtonProps } from './components/MyButton';
+
+test('ComponentBus Test', () => {
+    const mockOnClick = jest.fn();
+    ComponentBus.getInstance().registerComponent('Button', MyButton);
+    const Button = ComponentBus.getInstance().getComponent('Button') as React.ComponentType<MyButtonProps>;
+    expect(Button).toEqual(MyButton);
+    render(<Button text="Click me" onClick={mockOnClick} />);
+
+    // 断言按钮文本
+    const button = screen.getByRole('button', { name: 'my-button' });
+
+    // 断言按钮存在
+    expect(button).toBeInTheDocument();
+
+    // 模拟点击按钮
+    fireEvent.click(button);
+
+    // 断言点击事件被调用
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+});

jest/components/MyButton/index.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+export interface MyButtonProps {
+    onClick?: () => void;
+    text?: string;
+}
+
+const MyButton:React.FC<MyButtonProps> = (props)=>{
+    return (
+        <a
+            href={"#"}
+            role={'button'}
+            aria-label={'my-button'}
+            onClick={()=>{
+                props.onClick && props.onClick();
+            }}>{props.text}</a>
+    )
+}
+
+export default MyButton;

package.json

@@ -2,7 +2,12 @@
   "name": "@codingapi/ui-framework",
   "version": "0.0.12",
   "description": "A UI Framework built with React and Typescript",
-  "keywords": ["ui", "framework", "react", "typescript"],
+  "keywords": [
+    "ui",
+    "framework",
+    "react",
+    "typescript"
+  ],
   "homepage": "https://github.com/codingapi/ui-framework",
   "bugs": {
     "url": "https://github.com/codingapi/ui-framework/issues"
@@ -33,7 +38,9 @@
   "scripts": {
     "clean": "rm -rf dist",
     "build": "yarn clean && rollup -c --bundleConfigAsCjs",
-    "push": "yarn build && yarn publish --access public"
+    "push": "yarn build && yarn publish --access public",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "eslintConfig": {
     "extends": [
@@ -56,13 +63,21 @@
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^29.5.14",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.32",
     "rollup": "^4.9.1",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-typescript2": "^0.36.0"
+    "rollup-plugin-typescript2": "^0.36.0",
+    "ts-jest": "^29.3.2"
   }
 }