Ajouter des tests Vitest dans une application Next.js

# Avec npm
npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths

# Avec pnpm
pnpm add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths(), react()],
  test: {
    environment: 'jsdom',
  },
})

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "vitest",
    "test:ci": "vitest run"
  }
}

npm install -D @testing-library/jest-dom

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

// Nettoie automatiquement après chaque test
afterEach(() => {
  cleanup()
})

// vitest.config.mts
export default defineConfig({
  plugins: [tsconfigPaths(), react()],
  test: {
    environment: 'jsdom',
    setupFiles: './test/vitest.setup.ts',
  },
})

// app/page.tsx
import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Accueil</h1>
      <Link href="/about">À propos</Link>
    </div>
  )
}

// __tests__/page.test.tsx
import { expect, test } from 'vitest'
import { render, screen } from '@testing-library/react'
import Page from '../app/page'

test('Page', () => {
  render(<Page />)
  expect(screen.getByRole('heading', { level: 1, name: 'Accueil' })).toBeDefined()
})

// components/logout.tsx
import { authClient } from "@/lib/auth-client"

export const LogoutButton = () => {
  return (
    <button onClick={() => authClient.signOut()}>
      Logout
    </button>
  )
}

// __tests__/logout.test.tsx
import { LogoutButton } from "@/components/logout"
import { authClient } from "@/lib/auth-client"
import { fireEvent, render, screen } from "@testing-library/react"
import { beforeAll, describe, expect, it, vi } from "vitest"

beforeAll(() => {
  vi.mock("@/lib/auth-client", () => ({
    authClient: {
      signOut: vi.fn(),
    },
  }))
})

describe("LogoutButton", () => {
  it("should renders logout button correctly", () => {
    render(<LogoutButton />)
    expect(screen.getByRole("button", { name: "Logout" })).toBeDefined()
  })

  it("should call signOut when clicked", () => {
    render(<LogoutButton />)
    const button = screen.getByRole("button", { name: "Logout" })
    fireEvent.click(button)
    expect(authClient.signOut).toHaveBeenCalled()
  })
})

// __tests__/upload-dropzone.test.tsx
import { UploadDropzone } from "@/components/upload-dropzone"
import { fireEvent, render, screen, waitFor } from "@testing-library/react"
import { describe, expect, it, vi } from "vitest"

describe("UploadDropzone", () => {
  it("should handle file drop correctly", async () => {
    const mockUploadFile = vi.fn()
    const mockOnClientUploadComplete = vi.fn()

    render(
      <UploadDropzone 
        uploadFile={mockUploadFile} 
        onClientUploadComplete={mockOnClientUploadComplete} 
      />
    )

    const dropzone = screen
      .getByText("Drag and drop or click to upload a file")
      .closest("div")
    const file = new File(["file contents"], "test.pdf", {
      type: "application/pdf",
    })

    if (dropzone) {
      // Simuler des événements de drag
      fireEvent.dragOver(dropzone)
      expect(screen.getByText("Drop the file here")).toBeDefined()

      // Créer un objet DataTransfer mock
      const dataTransfer = {
        files: [file],
      }

      fireEvent.drop(dropzone, { dataTransfer })

      await waitFor(() => {
        expect(mockUploadFile).toHaveBeenCalledWith(file)
        expect(mockOnClientUploadComplete).toHaveBeenCalled()
      })
    }
  })
})

vitest:
  runs-on: ubuntu-latest
  strategy:
    matrix:
      node-version: [22.x]
  steps:
    - uses: pnpm/action-setup@v2
      with:
        version: 8
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
    - name: Install
      run: pnpm install
      env:
        CI: true
    - name: Run TypeScript check
      run: pnpm vitest:ci
      env:
        CI: true