Vitest, RTL導入メモ

メモ

コマンド

npm -D i vitest
npm -D i jsdom
npm install --save-dev @testing-library/react @testing-library/dom @types/react @types/react-dom
npm run test

package.json

  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
+   "test": "vitest"
  },

サンプルテスト

// @vitest-environment jsdom
import App from "./App.tsx";
import { render } from "@testing-library/react";
import { expect, test } from "vitest";

test("hogeテスト", () => {
  render(<App />);

  expect(document.querySelector("#hoge")).toBeDefined();
});

参考