VITEST.md

⭐️ Testing ⭐️

🎯️ Installation

• We going to install other packages with vitest. We will use them with together vitest.

    npm i -D vitest
	npm i -D jsdom @testing-library/react @testing-library/jest-dom
	npm i -D @testing-library/user-event

• In the above commands we installed certain packages
  • vitest
  • jsdom (for implementing browsers dom Api)
  • react-testing-library (for testing React components)
  • user-event (for event handling)

🎯️ Configuration

tsconfig.json

{
  "compilerOptions": {
    // ...
       "types": ["vitest/globals"],
  },

    "include": ["src", "**/*.ts", "**/*.tsx", "**/*.test.ts", "**/*.test.tsx"]
    // ...
}

Create setup.ts file first before configure vite.config.ts which is looks like this:

import "@testing-library/jest-dom/vitest";
import { cleanup } from "@testing-library/react";
import { afterEach } from "vitest";

afterEach(() => {
  // e.g, clearing jsdom
  cleanup();
});

vite.config.ts

/// <reference types="vitest" />

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    css: true,
    setupFiles: "./src/test/setup.ts",
  },
});

vite.config.ts

  "scripts": {
    //...
    "test": "vitest"
  },

🎯️ Runing test

    npm run test

🎯️ For extra info visit these links:

• https://vitest.dev/
• https://testing-library.com/
• https://github.com/testing-library/dom-testing-library/blob/main/src/event-map.js

Go back to README.md