add vitest

.changeset/clever-eagles-repeat.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/dry-turkeys-lay.md

@@ -0,0 +1,2 @@
+---
+---

.eslintignore

@@ -2,3 +2,4 @@
 /packages/components/src/Icon/bin/Template.tsx
 /docs/storybook-static
 /docs/preview.css
+vitest.setup.ts

.eslintrc.js

@@ -39,7 +39,7 @@ module.exports = {
     "sort-imports-es6-autofix",
     "ssr-friendly",
     "jsx-a11y",
-    "jest",
+    "vitest",
   ],
   rules: {
     "@typescript-eslint/adjacent-overload-signatures": "error",
@@ -177,19 +177,19 @@ module.exports = {
         pathGroupsExcludedImportTypes: [],
       },
     ],
-    "jest/consistent-test-it": ["error", { fn: "it" }],
-    "jest/expect-expect": "error",
-    "jest/no-commented-out-tests": "error",
-    "jest/no-conditional-expect": "error",
-    "jest/no-focused-tests": "error",
-    "jest/no-disabled-tests": "error",
-    "jest/no-standalone-expect": "error",
-    "jest/no-test-return-statement": "error",
-    "jest/prefer-equality-matcher": "error",
-    "jest/require-top-level-describe": "error",
-    "jest/valid-describe-callback": "error",
-    "jest/valid-expect": "error",
-    "jest/valid-title": "error",
+    "vitest/consistent-test-it": ["error", { fn: "it" }],
+    "vitest/expect-expect": "error",
+    "vitest/no-commented-out-tests": "error",
+    "vitest/no-conditional-expect": "error",
+    "vitest/no-focused-tests": "error",
+    "vitest/no-disabled-tests": "error",
+    "vitest/no-standalone-expect": "error",
+    "vitest/no-test-return-statement": "error",
+    "vitest/prefer-equality-matcher": "error",
+    "vitest/require-top-level-describe": "error",
+    "vitest/valid-describe-callback": "error",
+    "vitest/valid-expect": "error",
+    "vitest/valid-title": "error",
     "jsdoc/check-alignment": "off",
     "jsdoc/check-indentation": "off",
     "jsdoc/newline-after-description": "off",

.github/actions/branch-preview/action.yml

@@ -29,7 +29,7 @@ runs:
         body-includes: ":sparkles: Here is your branch preview! :sparkles:"
 
     - name: Create or update comment
-      uses: peter-evans/create-or-update-comment@v3
+      uses: peter-evans/create-or-update-comment@v4
       with:
         comment-id: ${{ steps.findComment.outputs.comment-id }}
         issue-number: ${{ inputs.prNumber }}

.github/workflows/ci.yml → .github/workflows/lint.yml

@@ -1,4 +1,4 @@
-name: ci
+name: lint
 
 on:
   push:
@@ -53,12 +53,3 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - run: pnpm lint:styles
-
-  jest:
-    if: github.head_ref != 'changeset-release/main'
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    steps:
-      - uses: actions/checkout@v4
-      - uses: ./.github/actions/setup
-      - run: pnpm test:ci

.github/workflows/test-stories.yaml

@@ -49,7 +49,7 @@ jobs:
           retention-days: 1
 
   storybook-tests-1:
-    name: "test-storybook"
+    name: "test-storybook (shard 3/3)"
     needs: build-test-storybook
     runs-on: ubuntu-latest
     timeout-minutes: 10
@@ -62,10 +62,10 @@ jobs:
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (1/3)
-        run: pnpm -F @docs/storybook test -- --shard 1/3
+        run: pnpm turbo @docs/storybook#test:storybook -- --shard 1/3
 
   storybook-tests-2:
-    name: "test-storybook"
+    name: "test-storybook (shard 2/3)"
     needs: build-test-storybook
     runs-on: ubuntu-latest
     timeout-minutes: 10
@@ -78,10 +78,10 @@ jobs:
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (2/3)
-        run: pnpm -F @docs/storybook test -- --shard 2/3
+        run: pnpm turbo @docs/storybook#test:storybook -- --shard 2/3
 
   storybook-tests-3:
-    name: "test-storybook"
+    name: "test-storybook (shard 3/3)"
     needs: build-test-storybook
     runs-on: ubuntu-latest
     timeout-minutes: 10
@@ -94,7 +94,7 @@ jobs:
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (3/3)
-        run: pnpm -F @docs/storybook test -- --shard 3/3
+        run: pnpm turbo @docs/storybook#test:storybook -- --shard 3/3
 
   chromatic:
     needs: run-check

.github/workflows/test-unit.yml

@@ -0,0 +1,52 @@
+name: test unit
+
+on:
+  push:
+    branches-ignore:
+      - main
+
+  # When Changesets opens a PR it does not trigger GitHub actions,
+  # because its token does not have permission to. This is a hack
+  # to allow one of us to trigger GitHub actions for a changesets PR
+  # by enabling automerge on the PR.
+  pull_request_target:
+    types:
+      - auto_merge_enabled
+    branches:
+      - main # the target branch of the PR
+    paths:
+      - "**/CHANGELOG.md" # only changesets releases touch changelogs
+
+jobs:
+  unit-tests:
+    if: github.head_ref != 'changeset-release/main'
+    name: "test-unit (shard 1/3)"
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Unit tests
+        run: pnpm test -- -- --run --shard=1/3
+
+  unit-tests-2:
+    if: github.head_ref != 'changeset-release/main'
+    name: "test-unit (shard 2/3)"
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Unit tests
+        run: pnpm test -- -- --run --shard=2/3
+
+  unit-tests-3:
+    if: github.head_ref != 'changeset-release/main'
+    name: "test-unit (shard 3/3)"
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - name: Unit tests
+        run: pnpm test -- -- --run --shard=3/3

docs/package.json

@@ -12,7 +12,7 @@
     "build:test": "storybook build --test",
     "build:chromatic": "storybook build --webpack-stats-json",
     "build:tailwind": "npx tailwindcss -i ./tailwind.css -o ./.storybook/preview.css",
-    "test": "test-storybook --skipTags='skip-test' --url http://127.0.0.1:6006",
+    "test:storybook": "test-storybook --skipTags='skip-test' --url http://127.0.0.1:6006",
     "clean": "rimraf './storybook-static' './node_modules' '.turbo'"
   },
   "dependencies": {

package.json

@@ -12,13 +12,10 @@
     "build": "pnpm turbo build",
     "clean": "pnpm turbo clean && rimraf node_modules && pnpm store prune",
     "test": "pnpm turbo test",
-    "test:ci": "pnpm turbo test:ci",
-    "jest:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --no-cache",
-    "eslint-config": "pnpm eslint -c .eslintrc.js --max-warnings=0",
     "lint": "pnpm lint:js && pnpm lint:md && pnpm lint:format && pnpm lint:styles",
     "lint:ts": "pnpm turbo lint:ts",
-    "lint:js": "pnpm eslint-config '**/*.{ts,tsx,mjs,js}'",
-    "lint:md": "pnpm eslint-config '**/*.{md,mdx}'",
+    "lint:js": "pnpm eslint '**/*.{ts,tsx,mjs,js}' --max-warnings=0",
+    "lint:md": "pnpm eslint '**/*.{md,mdx}' --max-warnings=0",
     "lint:format": "pnpm prettier --check '**/*'",
     "lint:scss": "pnpm stylelint '**/*.scss' --config .stylelintrc-scss.json",
     "lint:css": "pnpm stylelint '**/*.css' --config .stylelintrc-css.mjs",
@@ -58,12 +55,9 @@
     "@storybook/test": "^8.2.9",
     "@storybook/theming": "^8.2.9",
     "@stylistic/eslint-plugin": "^2.6.4",
-    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
-    "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.14.12",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
@@ -74,18 +68,13 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
     "eslint-plugin-ssr-friendly": "^1.3.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "jest": "^29.7.0",
-    "jest-axe": "^9.0.0",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-static-stubs": "^0.0.1",
+    "eslint-plugin-vitest": "^0.5.4",
     "node-fetch": "^3.3.2",
     "playwright": "^1.46.1",
     "plop": "^4.0.1",
@@ -95,13 +84,13 @@
     "stylelint": "^16.8.2",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-config-standard-scss": "^13.1.0",
-    "ts-jest": "^29.2.4",
-    "ts-node": "^10.9.2",
     "turbo": "^2.0.14",
-    "typescript": "^5.5.4"
+    "typescript": "^5.5.4",
+    "vite": "^5.4.2",
+    "vitest": "^2.0.5",
+    "vitest-axe": "^0.1.0"
   },
   "devDependenciesComments": {
-    "ts-node": "Required for jest",
     "@storybook/*": "Required for Storybook stories across all packages",
     "chromatic": "Required for Storybook stories across all packages",
     "playwright": "Required for github actions setup"

packages/components/__tests__/index.ts

@@ -1 +1 @@
-export * from "./renderWithIntl"
+export * from "./reactIntlMock"

packages/components/__tests__/reactIntlMock.ts

@@ -0,0 +1,42 @@
+import { MessageDescriptor } from "@cultureamp/i18n-react-intl"
+import { vi } from "vitest"
+
+const replaceInputValue = (str: string, value: string): string => {
+  const regex = /{([^}]+)}/g
+  return str.replace(regex, (match, capturedValue) => {
+    if (capturedValue) {
+      return value[capturedValue]
+    }
+    // Handle other captured values here if needed
+    return match
+  })
+}
+
+// Note: This mock does not exist to enable testing of internationalisation,
+// but to silence the errors from components that requires `useIntl`
+// and `FormattedMessage` from `@cultureamp/i18n-react-intl`
+//
+// If you need to test internationalisation, you should use Storybook stories
+export const reactIntlMock = (): any => {
+  const mocks = vi.hoisted(() => ({
+    useIntl: vi.fn(),
+    FormattedMessage: vi.fn(),
+  }))
+
+  vi.mock("@cultureamp/i18n-react-intl", () => ({
+    StaticIntlProvider: ({ children }: { children: React.ReactNode }) =>
+      children,
+    useIntl: () => ({
+      formatMessage: (message: MessageDescriptor, values: any) =>
+        values
+          ? replaceInputValue(message.defaultMessage as string, values)
+          : message.defaultMessage,
+    }),
+    FormattedMessage: (message: MessageDescriptor & { values: any }) =>
+      message.values
+        ? replaceInputValue(message.defaultMessage as string, message.values)
+        : message.defaultMessage,
+  }))
+
+  return mocks
+}

packages/components/codemods/utils/__snapshots__/transformSource.spec.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`transformSource updates the value of Pancakes topping to jam 1`] = `
+exports[`transformSource > updates the value of Pancakes topping to jam 1`] = `
 "import * as React from "react";
 // @ts-ignore
 import { Pancakes } from "@kaizen/components";