feat: vitest initial config

.github/workflows/unit-test-packages.yml

@@ -0,0 +1,28 @@
+name: Unit Test Packages
+
+on:
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+   unit-test-packages:
+     runs-on: ubuntu-latest
+     steps:
+       - name: Checkout
+         uses: actions/checkout@v4
+       - name: Setup Node
+         uses: actions/setup-node@v4
+         with:
+          node-version-file: "package.json"
+       - name: Install Dependencies
+         run: yarn --frozen-lockfile
+       - name: Build Packages
+         run: yarn build:packages
+       - name: Run Tests
+         run: yarn test
+       # TODO: Collect Coverage and display in repo
+

package.json

@@ -8,11 +8,17 @@
   "license": "MIT",
   "private": true,
   "packageManager": "[email protected]",
+  "engines": {
+    "node": "20.9.0"
+  },
   "scripts": {
     "dev:packages": "turbo dev --filter=\"./packages/*\"",
     "build:packages": "turbo build --filter=\"./packages/*\"",
     "dev:examples": "turbo dev --filter=\"./examples/*\"",
     "build:examples": "turbo build --filter=\"./examples/*\"",
+    "test": "turbo test --filter=\"./packages/*\"",
+    "test:watch": "turbo test:watch --filter=\"./packages/*\"",
+    "coverage": "turbo coverage --filter=\"./packages/*\"",
     "lint": "turbo lint",
     "format": "turbo format",
     "postinstall": "manypkg check",

packages/typography/package.json

@@ -27,18 +27,22 @@
     "build": "yarn clean && yarn build:esm && yarn build:cjs",
     "build:esm": "export BUILD_TARGET=esm; tsc && vite build",
     "build:cjs": "export BUILD_TARGET=cjs; tsc && vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "coverage": "vitest run --coverage",
     "preview": "vite preview"
   },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
   "devDependencies": {
     "@telegraph/postcss-config": "*",
     "@telegraph/tailwind-config": "*",
     "@telegraph/vite-config": "*",
+    "@telegraph/vitest-config": "*",
     "@types/react": "^18.2.48",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

packages/typography/src/Heading/Heading.test.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { axe } from "vitest-axe";
+import { render } from "@testing-library/react";
+
+import { Heading } from "./Heading";
+
+describe("Heading", () => {
+  it("should render as expected", async () => {
+    const { container } = render(<Heading />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

packages/typography/tsconfig.json

@@ -10,14 +10,15 @@
     "incremental": false,
     "isolatedModules": true,
     "lib": ["es2022", "DOM", "DOM.Iterable"],
-    "module": "es2015",
+    "module": "ESNext",
     "moduleDetection": "force",
     "moduleResolution": "bundler",
     "noUncheckedIndexedAccess": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "ES2022",
+    "target": "ESNext",
   },
-  "exclude": ["vite.config.ts","node_modules","dist","*.css"],
+  "include": ["vitest.config.ts"],
+  "exclude": ["node_modules", "dist", "*.css"],
 }

packages/typography/vitest.config.ts

@@ -0,0 +1,2 @@
+import { vitestConfig } from "@telegraph/vitest-config";
+export default vitestConfig;

packages/typography/vitest.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="@telegraph/vitest-config/dist/vitest-axe.d.ts" />
+// NOTE: This file should not be editied
+// This generates the correct types for vite `expect` to interacte with "vitest-axe"

packages/vite-config/package.json

@@ -10,5 +10,8 @@
     "vite": "^5.0.12",
     "vite-plugin-dts": "^3.7.2"
   },
+  "devDependencies": {
+    "typescript": "^5.3.3"
+  },
   "repository": "https://github.com/knocklabs/telegraph/tree/master/packages/vite-config"
 }

packages/vitest-config/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@telegraph/vitest-config",
+  "version": "0.0.1",
+  "description": "Shared test utilities for Telegraph",
+  "repository": "https://github.com/knocklabs/telegraph/tree/master/packages/vitest-config",
+  "author": "@knocklabs",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./setup": "./src/vitest-setup/index.ts"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "yarn clean && tsc"
+  },
+  "dependencies": {
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "jsdom": "^24.0.0",
+    "vitest": "^1.2.2",
+    "vitest-axe": "^0.1.0"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

packages/vitest-config/src/index.ts

@@ -0,0 +1 @@
+export { default as vitestConfig } from "./vitest-config/index.js";

packages/vitest-config/src/vitest-axe.ts

@@ -0,0 +1,8 @@
+// Declaration file that can be used to augment the types of vitest for axe in packages files
+import "vitest"
+import type { AxeMatchers } from "vitest-axe/matchers";
+
+declare module "vitest" {
+  export interface Assertion extends AxeMatchers {}
+  export interface AsymmetricMatchersContaining extends AxeMatchers {}
+}

packages/vitest-config/src/vitest-config/index.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vitest/config";
+export default defineConfig({
+  test: {
+    setupFiles: ["@telegraph/vitest-config/setup"],
+    environment: "jsdom",
+  },
+});

packages/vitest-config/src/vitest-setup/index.ts

@@ -0,0 +1,10 @@
+import * as matchers from "vitest-axe/matchers";
+import { expect } from "vitest";
+expect.extend(matchers);
+
+/*
+ fixes: Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
+ source: https://stackoverflow.com/questions/48828759/unit-test-raises-error-because-of-getcontext-is-not-implemented
+*/
+// @ts-expect-error
+HTMLCanvasElement.prototype.getContext = () => {};

packages/vitest-config/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "tailwind-config",
+  "compilerOptions": {
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "declaration": true,
+    "declarationMap": true,
+    "incremental": false,
+    "isolatedModules": true,
+    "lib": ["es2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ESNext",
+  },
+}

turbo.json

@@ -2,31 +2,26 @@
   "$schema": "https://turbo.build/schema.json",
   "pipeline": {
     "build": {
-      "dependsOn": [
-        "^build"
-      ],
-      "outputs": [
-        ".next/**",
-        "!.next/cache/**",
-        "dist/**"
-      ]
+      "dependsOn": ["^build"],
+      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
+    },
+    "build:packages": {
+      "dependsOn": ["^build:packages"],
+      "outputs": ["packages/**/dist/**"]
     },
     "lint": {
-      "dependsOn": [
-        "^lint"
-      ]
+      "dependsOn": ["^lint"]
     },
     "dev": {
       "cache": false,
       "persistent": true
     },
     "test": {
-      "dependsOn": [
-        "build"
-      ]
+      "dependsOn": ["build:packages"]
     },
     "test:watch": {
       "cache": false
-    }
+    },
+    "coverage": {}
   }
 }