Merge pull request #38 from abusix/pla-479-hailstorm-setup-test-execu…

…tion-for-repo

feat(chore): add test execution

.github/workflows/release.yml

@@ -1,25 +1,25 @@
 name: Semantic Release CI
 
 on:
-  push:
-    branches: [main]
+    push:
+        branches: [main]
 
 env:
-  GH_TOKEN: ${{ secrets.GH_TOKEN }}
-  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    GH_TOKEN: ${{ secrets.GH_TOKEN }}
+    NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-          persist-credentials: false # <--- this
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: "npm"
-      - run: npm ci
-      - run: npm run build
-      - run: npx semantic-release
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+              with:
+                  fetch-depth: 0
+                  persist-credentials: false
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 18
+                  cache: "npm"
+            - run: npm ci
+            - run: npm run build
+            - run: npx semantic-release

.github/workflows/test.yaml

@@ -0,0 +1,19 @@
+name: Test Components
+
+on:
+    pull_request_target:
+        types: [opened, reopened]
+
+jobs:
+    run-tests:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+              with:
+                  persist-credentials: false
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 18
+                  cache: "npm"
+            - run: npm ci
+            - run: npm run test

package.json

@@ -25,7 +25,8 @@
         "storybook": "storybook dev -p 6006",
         "clean": "rimraf ./dist",
         "type-check": "tsc --project tsconfig.json",
-        "test": "jest",
+        "test": "vitest",
+        "test:coverage": "vitest run --coverage",
         "lint": "eslint src --ext .ts,.tsx",
         "lint:write": "eslint src --ext .ts,.tsx --fix",
         "format:check": "prettier --check src",
@@ -68,13 +69,14 @@
         "@storybook/react-vite": "^7.1.1",
         "@storybook/testing-library": "^0.2.0",
         "@svgr/cli": "8.0.1",
+        "@testing-library/jest-dom": "^6.1.3",
         "@testing-library/react": "^14.0.0",
-        "@types/jest": "^29.5.2",
         "@types/react": "^18.2.14",
         "@typescript-eslint/eslint-plugin": "5.61.0",
         "@typescript-eslint/parser": "^5.61.0",
+        "@vitejs/plugin-react": "^4.0.4",
+        "@vitest/coverage-v8": "^0.34.4",
         "autoprefixer": "^10.4.14",
-        "babel-jest": "^29.6.1",
         "babel-loader": "^9.1.2",
         "eslint": "8.44.0",
         "eslint-config-airbnb": "19.0.4",
@@ -87,8 +89,7 @@
         "eslint-plugin-react-hooks": "4.6.0",
         "eslint-plugin-storybook": "0.6.13",
         "eslint-plugin-tsdoc": "0.2.17",
-        "jest": "^29.6.1",
-        "jest-environment-jsdom": "^29.6.1",
+        "jsdom": "^22.1.0",
         "prettier": "^3.0.0",
         "prettier-plugin-tailwindcss": "0.3.0",
         "prop-types": "^15.8.1",
@@ -105,7 +106,8 @@
         "tailwind-merge": "^1.13.2",
         "tailwindcss": "^3.3.3",
         "typescript": "^5.1.6",
-        "vite": "^4.4.1"
+        "vite": "^4.4.1",
+        "vitest": "^0.34.4"
     },
     "peerDependencies": {
         "react": ">=17.0.1",
@@ -114,9 +116,6 @@
     "overrides": {
         "optionator": {
             "[email protected]": "1.2.5"
-        },
-        "jsdom@20": {
-            "[email protected]": "4.1.3"
         }
     }
 }

src/components/alert/alert.test.tsx

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { getByText, render, screen } from "@testing-library/react";
+import React from "react";
+import { Alert } from "./alert";
+
+describe("Alert", () => {
+    it("renders an alert with a title and children", () => {
+        // ARRANGE
+        render(
+            <Alert intent="info" title="Hello">
+                World
+            </Alert>
+        );
+
+        // ASSERT
+        const alert = screen.getByRole("alert");
+        expect(alert).toBeInTheDocument();
+        expect(getByText(alert, "Hello")).toBeInTheDocument();
+        expect(getByText(alert, "World")).toBeInTheDocument();
+    });
+});

tsconfig.json

@@ -1,34 +1,33 @@
 {
-	"compilerOptions": {
-		/* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-		"target": "es2016",
-		/* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
-		"esModuleInterop": true,
-		/* Ensure that casing is correct in imports. */
-		"forceConsistentCasingInFileNames": true,
-		/* Enable all strict type-checking options. */
-		"strict": true,
-		/* Skip type checking all .d.ts files. */
-		"skipLibCheck": true,
-		"jsx": "react",
-		"module": "ESNext",
-		"noEmit": true,
-		// "declaration": true,
-		// "declarationDir": "types",
-		// "emitDeclarationOnly": true,
-		"sourceMap": true,
-		"outDir": "dist",
-		"moduleResolution": "node",
-		"allowSyntheticDefaultImports": true
-	},
-	"include": [
-		"src/**/*.ts",
-		"src/**/*.tsx",
-		"*.cjs",
-		"*.js"
-	],
-	"exclude": [
-		"dist",
-		"node_modules"
-	]
+    "compilerOptions": {
+        /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+        "target": "es2016",
+        /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+        "esModuleInterop": true,
+        /* Ensure that casing is correct in imports. */
+        "forceConsistentCasingInFileNames": true,
+        /* Enable all strict type-checking options. */
+        "strict": true,
+        /* Skip type checking all .d.ts files. */
+        "skipLibCheck": true,
+        "jsx": "react",
+        "module": "ESNext",
+        "noEmit": true,
+        // "declaration": true,
+        // "declarationDir": "types",
+        // "emitDeclarationOnly": true,
+        "sourceMap": true,
+        "outDir": "dist",
+        "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "*.cjs",
+        "*.js",
+        "vite.config.ts",
+        "vitest-setup.ts"
+    ],
+    "exclude": ["dist", "node_modules"]
 }

vite.config.ts

@@ -0,0 +1,18 @@
+/// <reference types="vitest" />
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { defineConfig } from "vite";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import react from "@vitejs/plugin-react";
+
+// eslint-disable-next-line no-restricted-exports
+export default defineConfig({
+    plugins: [react()],
+    test: {
+        environment: "jsdom",
+        setupFiles: ["./vitest-setup.ts"],
+        coverage: {
+            reporter: ["text"],
+        },
+    },
+});

vitest-setup.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import "@testing-library/jest-dom/vitest";