Fix testing for react

package.json

@@ -13,7 +13,8 @@
     "publish:react": "pnpm --filter heartbit-react publish",
     "publish:core": "pnpm --filter heartbit-core publish",
     "prepublish": "pnpm run build",
-    "publish": "pnpm run prepublish && pnpm run publish:core && pnpm run publish:react"
+    "publish": "pnpm run prepublish && pnpm run publish:core && pnpm run publish:react",
+    "test:react": "pnpm --filter heartbit-react test"
   },
   "keywords": [
     "heartbitsdk",

packages/heartbit-react/jest.config.cjs

@@ -1,14 +1,19 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
+// eslint-disable-next-line no-undef
 module.exports = {
-     globals: {
-       'ts-jest': {
-          useESM: true,
-          tsconfig: {
-           verbatimModuleSyntax: false,
-         },
-       },
-       },
-  preset: 'ts-jest',
-  testEnvironment: 'node',
+  globals: {
+    "ts-jest": {
+      useESM: true,
+      tsconfig: {
+        verbatimModuleSyntax: false,
+        esModuleInterop: true,
+      },
+    },
+  },
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
   transform: {},
-};
+  moduleNameMapper: {
+    "\\.(css|sass|scss)$": "identity-obj-proxy",
+  },
+};

packages/heartbit-react/package.json

@@ -48,6 +48,8 @@
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "identity-obj-proxy": "^3.0.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.33",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -57,12 +59,12 @@
     "vite": "^5.0.8",
     "vite-plugin-css-injected-by-js": "^3.3.1",
     "vite-plugin-dts": "^3.7.2",
-    "vite-plugin-node-polyfills": "^0.19.0"
+    "vite-plugin-node-polyfills": "^0.19.0",
+    "jest": "^29.7.0",
+    "ts-jest": "^29.1.2"
   },
   "dependencies": {
     "@fileverse/heartbit-core": "workspace:^",
-    "classnames": "^2.5.1",
-    "jest": "^29.7.0",
-    "ts-jest": "^29.1.2"
+    "classnames": "^2.5.1"
   }
 }

packages/heartbit-react/src/components/HeartBitProvider/index.test.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useEffect } from "react";
+import { render } from "@testing-library/react";
+import { HeartBitContext, HeartBitProvider } from ".";
+import { describe, expect, jest, it } from "@jest/globals";
+import { HeartBitCoreOptions } from "@fileverse/heartbit-core";
+
+const getHeartBitByUserMock = jest.fn();
+
+jest.mock("@fileverse/heartbit-core", () => ({
+  HeartBitCore: jest.fn().mockImplementation(() => {
+    return {
+      getHeartBitByUser: getHeartBitByUserMock,
+      getTotalHeartBitCountByHash: jest.fn(),
+      mintHeartBit: jest.fn(),
+    };
+  }),
+}));
+
+describe("HeartBitProvider", () => {
+  const coreOptions: HeartBitCoreOptions = { chain: "0xaa36a7" };
+
+  it("provides context functions", () => {
+    const TestComponent = () => {
+      const context = React.useContext(HeartBitContext);
+
+      expect(context).not.toBeNull();
+      expect(context?.getTotalHeartMintsByUser).toBeDefined();
+      expect(context?.getTotalHeartBitByHash).toBeDefined();
+      expect(context?.mintHeartBit).toBeDefined();
+
+      return <div>Testing</div>;
+    };
+
+    render(
+      <HeartBitProvider coreOptions={coreOptions}>
+        <TestComponent />
+      </HeartBitProvider>
+    );
+  });
+
+  it("calls getTotalHeartMintsByUser", async () => {
+    const TestComponent = () => {
+      const context = React.useContext(HeartBitContext);
+      useEffect(() => {
+        context?.getTotalHeartMintsByUser({
+          hash: "ipfs://test",
+          account: "0xtest",
+        });
+      }, [context]);
+
+      return <div>Testing</div>;
+    };
+
+    render(
+      <HeartBitProvider coreOptions={coreOptions}>
+        <TestComponent />
+      </HeartBitProvider>
+    );
+
+    expect(getHeartBitByUserMock).toHaveBeenCalledWith({
+      hash: "ipfs://test",
+      account: "0xtest",
+    });
+  });
+});