Yamada UIのテストスイートをJestからvitestに乗り換える

import { defineConfig } from "vitest/config"

export default defineConfig({
  test: {},
})

import { defineConfig } from "vitest/config"

export default defineConfig({
- test: {},
+ test: {
+  globals: true
+ },
})

import type { Config } from "jest"

const config: Config = {
  testEnvironment: "jsdom",
  collectCoverageFrom: ["packages/**/*.{ts,tsx}"],
  coveragePathIgnorePatterns: ["dist", "theme", "tests", "test"],
  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
  modulePathIgnorePatterns: [
    "<rootDir>/examples",
    "<rootDir>/stories",
    "<rootDir>/scripts",
  ],
  transform: {
    "^.+\\.(ts|tsx|js|jsx)?$": ["@swc-node/jest", { module: "commonjs" }],
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"],
  setupFilesAfterEnv: ["@testing-library/jest-dom", "./scripts/setup-test.ts"],
  globals: {},
  watchPlugins: [
    "jest-watch-typeahead/filename",
    "jest-watch-typeahead/testname",
  ],
}

export default config

collectCoverageFrom: ["packages/**/*.{ts,tsx}"],
coveragePathIgnorePatterns: ["dist", "theme", "tests", "test"],

export default defineConfig({
  test: {
    globals: true,
+   coverage: {
+     include: ["packages/**/*.{ts,tsx}"],
+     exclude: ["dist", "theme", "tests", "test"],
+  },
  },
})

export default defineConfig({
  test: {
+   environment: "jsdom",
    globals: true,
    coverage: {
      include: ["packages/**/*.{ts,tsx}"],
      exclude: ["dist", "theme", "tests", "test"],
    },
  },
})

import { defineConfig } from "vitest/config"

export default defineConfig({
  test: {
    environment: "jsdom",
    globals: true,
    coverage: {
      include: ["packages/**/*.{ts,tsx}"],
      exclude: ["dist", "theme", "tests", "test"],
    },
+   deps: {
+     web: {
+       transformGlobPattern: [/[/\\\\]packages[/\\\\].+\\.(js|jsx|ts|tsx)$/],
+     },
+   },
  },
})

import { defineConfig } from "vitest/config"

export default defineConfig({
  test: {
    environment: "jsdom",
    globals: true,
    coverage: {
      include: ["packages/**/*.{ts,tsx}"],
      exclude: ["dist", "theme", "tests", "test"],
    },
    deps: {
      web: {
        transformGlobPattern: [/[/\\\\]packages[/\\\\].+\\.(js|jsx|ts|tsx)$/],
      },
    },
+   setupFiles: ["./scripts/setup-test.ts"],
  },
})

pnpm add -w @vitejs/plugin-react-swc

import { defineConfig } from "vitest/config"
import react from "@vitejs/plugin-react-swc"

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    globals: true,
    coverage: {
      include: ["packages/**/*.{ts,tsx}"],
      exclude: ["dist", "theme", "tests", "test"],
    },
    deps: {
      web: {
        transformGlobPattern: [/[/\\\\]packages[/\\\\].+\\.(js|jsx|ts|tsx)$/],
      },
    },
    setupFiles: ["./scripts/setup-test.ts"],
  },
})

  {
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "lib": ["dom", "esnext"],
      "declaration": true,
      "sourceMap": true,
      "moduleResolution": "node",
      "skipLibCheck": true,
      "strict": true,
      "isolatedModules": true,
      "noFallthroughCasesInSwitch": true,
      "jsx": "react-jsx",
      "esModuleInterop": true,
      "resolveJsonModule": true,
      "allowSyntheticDefaultImports": true,
      "downlevelIteration": true,
+     "types": ["vitest/globals"]
    },
    "include": ["@types", "**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
    "exclude": [
      "node_modules",
      "examples",
      "dist",
      ".changelog",
      ".changeset",
      ".turbo"
    ],
    "ts-node": {
      "transpileOnly": true,
      "compilerOptions": {
        "module": "CommonJS"
      }
    }
  }

- import "@testing-library/jest-dom"
+ import "@testing-library/jest-dom/vitest"

  import "@testing-library/jest-dom/vitest"
+ import { vi } from "vitest"
  
  const { getComputedStyle } = window
  
  window.getComputedStyle = (elt) => getComputedStyle(elt)
  window.Element.prototype.scrollTo = () => { }
  window.scrollTo = () => { }
  
  if (typeof window.matchMedia !== "function") {
    Object.defineProperty(window, "matchMedia", {
      enumerable: true,
      configurable: true,
      writable: true,
      value: vi.fn().mockImplementation((query) => ({
        matches: false,
        media: query,
        onchange: null,
-       addListener: jest.fn(),
-       removeListener: jest.fn(),
-       addEventListener: jest.fn(),
-       removeEventListener: jest.fn(),
+       addListener: vi.fn(),
+       removeListener: vi.fn(),
+       addEventListener: vi.fn(),
+       removeEventListener: vi.fn(),
        dispatchEvent: vi.fn(),
      })),
    })
  }
  
  global.TextEncoder = require("util").TextEncoder
  
  global.ResizeObserver = vi.fn().mockImplementation(() => ({
-   observe: jest.fn(),
-   unobserve: jest.fn(),
-   disconnect: jest.fn(),
+   observe: vi.fn(),
+   unobserve: vi.fn(),
+   disconnect: vi.fn(),
  }))

cd packages/test
pnpm add vitest-axe axe-core

- import "@testing-library/jest-dom"
+ import "@testing-library/jest-dom/vitest"

- import { axe, toHaveNoViolations } from "jest-axe"
+ import { axe } from "vitest-axe"
+ import * as matchers from "vitest-axe/matchers"

// ...
- expect.extend(toHaveNoViolations)
+ expect.extend(matchers)

export type A11yProps = RenderOptions & { axeOptions?: JestAxeConfigureOptions }

export interface JestAxeConfigureOptions extends RunOptions {
    globalOptions?: Spec | undefined;
    impactLevels?: ImpactValue[];
}

/**
 * Runs aXe on HTML.
 *
 * @param html   Raw HTML string to verify with aXe.
 * @param options   Options to run aXe.
 * @returns Promise for the results of running aXe.
 */
export type JestAxe = (html: Element | string, options?: RunOptions) => Promise<AxeResults>;

// vitest-axe/src/axe.ts

function axe(
		html: Element | string,
		additionalOptions: AxeCore.RunOptions = {},
	): Promise<AxeCore.AxeResults>

RunOptions & {
  globalOptions?: Spec | undefined
  impactLevels?: ImpactValue[]
}

type A11yConfigureOptions = RunOptions & {
  globalOptions?: Spec
  impactLevels?: ImpactValue[]
}

  import type { RenderOptions } from "@testing-library/react"
- import type { JestAxeConfigureOptions } from "jest-axe"
  import { axe } from "vitest-axe"
  import * as matchers from "vitest-axe/matchers"
  import type { ReactElement } from "react"
  import { isValidElement } from "react"
  import { render } from "./render"
  import "@testing-library/jest-dom/vitest"
  import { expect } from "vitest"
+ import { ImpactValue, RunOptions, Spec } from "axe-core"
  
  expect.extend(matchers)

+ type A11yConfigureOptions = RunOptions & {
+   globalOptions?: Spec
+   impactLevels?: ImpactValue[]
+ }

- export type A11yProps = RenderOptions & { axeOptions?: JestAxeConfigureOptions }    
+ export type A11yProps = RenderOptions & { axeOptions?: A11yConfigureOptions }

  
  export const a11y = async (
    ui: ReactElement | HTMLElement,
    { axeOptions, ...rest }: A11yProps = {},
  ): Promise<void> => {
    const container = isValidElement(ui) ? render(ui, rest).container : ui
    const results = await axe(container as HTMLElement, axeOptions)
  
    expect(results).toHaveNoViolations()
  }

+ import { defineWorkspace } from "vitest/config"
+ 
+ export default defineWorkspace([
+   "packages/*",
+   {
+     extends: "./vitest.config.ts",
+   },
+ ])

- import { toHaveNoViolations } from "jest-axe"
  import type { ReactElement } from "react"
  import "@testing-library/jest-dom"
  
- expect.extend(toHaveNoViolations)

- import "@testing-library/jest-dom"

{
  "scripts": {
    "test": "jest",
    "test:coverage": "jest --coverage --silent && npx http-server ./coverage/lcov-report",
    "test:ci": "jest --coverage --silent --testLocationInResults --ci --json --outputFile=report.json",
}

  {
    "scripts": {
-     "test": "jest",
+     "test": "vitest",
      "test:coverage": "jest --coverage --silent && npx http-server ./coverage/lcov-report",
      "test:ci": "jest --coverage --silent --testLocationInResults --ci --json --outputFile=report.json",
  }