update tests

.babelrc.json

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "targets": { "node": "current" } }],
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    "@babel/preset-typescript"
+  ]
+}

.cache/ts-import/Users/chaitanya.varma/repos/1fe-sample-widget/.1fe.config.mjs

@@ -0,0 +1,5 @@
+import { getBaseConfig } from '@repo/widget-base-config'; // this is the redistributed package for the organization
+const configuration = {
+    baseConfig: getBaseConfig,
+};
+export default configuration;

jest.config.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+\\.(ts|tsx|js|jsx)$": "babel-jest"
+  },
+  moduleFileExtensions: [
+    "ts",
+    "tsx", 
+    "js",
+    "jsx",
+    "json"
+  ],
+  moduleNameMapper: {
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+  },
+  testMatch: [
+    "<rootDir>/src/**/__tests__/**/*.(ts|tsx|js)",
+    "<rootDir>/src/**/?(*.)(spec|test).(ts|tsx|js)"
+  ]
+};

package.json

@@ -1,30 +1,50 @@
 {
   "name": "app2",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "1fe-cli --trace --environment integration dev",
     "build:widget": "1fe-cli --trace --environment integration build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && echo ✔ Lint passed!",
     "format": "prettier --write .",
     "check-format": "prettier --check .",
-    "prepack": "yarn build"
+    "prepack": "yarn build",
+    "test": "yarn jest"
   },
   "devDependencies": {
-    "@1fe/cli": "github:docusign/1fe#head=main&workspace=@1fe/cli",
-    "@repo/widget-base-config": "github:docusign/1fe-sample-widget-base-config",
+    "@1fe/cli": "git+ssh://git@github.com/docusign/1fe.git#head=main&workspace=@1fe/cli",
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@repo/widget-base-config": "git+ssh://git@github.com/docusign/1fe-sample-widget-base-config.git#head=main",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/babel__core": "^7",
+    "@types/babel__preset-env": "^7",
+    "@types/jest": "^30.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.36.0",
+    "@typescript-eslint/parser": "^8.36.0",
+    "babel-jest": "^30.0.4",
     "cross-env": "^7.0.3",
     "eslint": "8.57.1",
     "eslint-config-prettier": "^10.1.1",
     "eslint-config-ts-react-important-stuff": "^3.0.0",
     "eslint-plugin-prettier": "^5.2.4",
+    "eslint-plugin-react": "^7.37.5",
     "identity-obj-proxy": "^3.0.0",
+    "jest": "^29",
+    "jest-environment-jsdom": "^30.0.4",
     "prettier": "^3.5.3",
     "pretty-quick": "^3.1.1",
     "ts-config-single-spa": "^3.0.0",
+    "ts-jest": "^29.4.0",
     "typescript": "5.8.2"
   },
   "dependencies": {
-    "@1fe/shell": "github:docusign/1fe#head=main&workspace=@1fe/shell",
+    "@1fe/eslint-config": "git+ssh://git@github.com/docusign/1fe.git#head=main&workspace=@1fe/eslint-config",
+    "@1fe/shell": "git+ssh://git@github.com/docusign/1fe.git#head=main&workspace=@1fe/shell",
     "@types/systemjs": "^6.15.1",
     "antd": "^5.22.4",
     "react": "^18.3.1",

src/app2.tsx

@@ -1,14 +1,14 @@
-import { platformProps } from '@1fe/shell';
-import { useState, useCallback, useEffect } from 'react';
-import { Button } from 'antd';
-import { WidgetProps, WidgetEvents } from './contract';
+import { platformProps } from "@1fe/shell";
+import { useState, useCallback, useEffect } from "react";
+import { Button } from "antd";
+import { WidgetProps, WidgetEvents } from "./contract";
 
 export default function Root(props: WidgetProps) {
   useEffect(() => {
     platformProps.utils.appLoadTime.end();
   }, []);
 
-  const [eventBusResult, setEventBusResult] = useState('unchanged');
+  const [eventBusResult, setEventBusResult] = useState("unchanged");
   const [unsubscribeFn, setUnsubscribeFn] = useState(() => () => {});
 
   const listener = useCallback(
@@ -22,31 +22,31 @@ export default function Root(props: WidgetProps) {
     <>
       <p>My component from app2 is mounted!</p>
       <Button
-        data-qa='eventBus.subscribe.btn'
+        data-qa="eventBus.subscribe.btn"
         onClick={() => {
           const unsubFn = platformProps.utils.eventBus.subscribe<
             WidgetEvents,
-            'event1'
+            "event1"
           >({
-            eventName: 'event1',
+            eventName: "event1",
             listener,
           });
-          setEventBusResult('subscribed');
+          setEventBusResult("subscribed");
           setUnsubscribeFn(() => unsubFn);
         }}
       >
         utils.eventBus.subscribe
       </Button>
       <Button
-        data-qa='eventBus.unsubscribe.btn'
+        data-qa="eventBus.unsubscribe.btn"
         onClick={() => {
-          setEventBusResult('unsubscribed');
+          setEventBusResult("unsubscribed");
           unsubscribeFn();
         }}
       >
         utils.eventBus.unsubscribe
       </Button>
-      <div data-qa='eventBus.result.container'>{eventBusResult}</div>
+      <div data-qa="eventBus.result.container">{eventBusResult}</div>
     </>
   );
 }

src/contract.ts

@@ -1,4 +1,4 @@
-import { PlatformPropsType } from '@1fe/shell';
+import { PlatformPropsType } from "@1fe/shell";
 
 export type HostPropsContract = Record<string, unknown>;
 

src/declarations.d.ts

@@ -1,39 +1,39 @@
-declare module '*.html' {
+declare module "*.html" {
   const rawHtmlFile: string;
   export = rawHtmlFile;
 }
 
-declare module '*.bmp' {
+declare module "*.bmp" {
   const src: string;
   export default src;
 }
 
-declare module '*.gif' {
+declare module "*.gif" {
   const src: string;
   export default src;
 }
 
-declare module '*.jpg' {
+declare module "*.jpg" {
   const src: string;
   export default src;
 }
 
-declare module '*.jpeg' {
+declare module "*.jpeg" {
   const src: string;
   export default src;
 }
 
-declare module '*.png' {
+declare module "*.png" {
   const src: string;
   export default src;
 }
 
-declare module '*.webp' {
+declare module "*.webp" {
   const src: string;
   export default src;
 }
 
-declare module '*.svg' {
+declare module "*.svg" {
   const src: string;
   export default src;
 }

src/root.component.test.tsx

@@ -1,9 +1,12 @@
-import { render } from '@testing-library/react';
-import Root from './root.component';
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Root from "./root.component";
 
-describe('Root component', () => {
-  it('should be in the document', () => {
-    const { getByText } = render(<Root name='Testapp' />);
-    expect(getByText(/Testapp is mounted!/i)).toBeInTheDocument();
+describe("Root component", () => {
+  it("should be in the document", () => {
+    const { getByText } = render(<Root />);
+    expect(
+      getByText(/My amazing component from app2 is mounted!/i),
+    ).toBeInTheDocument();
   });
 });

src/root.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 export default function Root() {
   return (
     <section>My amazing component from app2 is mounted! Hello world</section>

src/widget.ts

@@ -1,3 +1,3 @@
-import Root from './app2';
+import Root from "./app2";
 
 export default Root;