Jest vs Vitest : comparatif

Tableau comparatif rapide

Jest — Points forts

• Support complet : Offre des fonctions avancées comme la simulation de modules, la capture d'événements, et les tests asynchrones.

// Jest
test('Async test', async () => {
  const data = await fetchData();
  expect(data).toBe('expected');
});

• Mise en parallèle : Peut exécuter les tests en parallèle pour des performances optimales.

// Jest
const config = { maxWorkers: '50%' };
module.exports = {
  ...config,
};

• Prise en charge de l'API DOM : Permet d'écrire des tests avec le navigateur en local.

// Jest
test('DOM test', () => {
  document.body.innerHTML = '<div id="app"></div>';
  render(<App />, document.getElementById('app'));
  expect(screen.getByText(/hello/i)).toBeInTheDocument();
});

• Intégration complète : Connait bien Node.js et les tests unitaires traditionnels.
• Large écosystème : Beaucoup de plugins, librairies et outils disponibles.

Vitest — Points forts

• Performance optimisée : Utilise Webpack 5 pour des builds rapides et une taille de bundle plus petite.

// Vitest
test('Async test', async () => {
  const data = await fetchData();
  expect(data).toBe('expected');
});

• Intégration avec Vite : Offre une configuration rapide et fluide pour les projets modernes.

// vitest.config.js
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
  },
});

• Support TypeScript natif : A des fonctions avancées pour le typage en utilisant TypeScript.

// test.ts
import { describe, it, expect } from 'vitest';

describe('Example', () => {
  it('should work with typescript', () => {
    const x: number = 10;
    expect(x).toBe(10);
  });
});

• Simplification de la configuration : A une configuration plus simple et plus rapide à comprendre.
• Tests asynchrones facilités : Peut gérer les tests asynchrones avec async/await en natif.

Syntaxe cote a cote

Création d'un test simple

// Jest
test('adds 1 + 2 to equal 3', () => {
  expect(1 + 2).toBe(3);
});

// Vitest
import { test, expect } from 'vitest';

test('adds 1 + 2 to equal 3', () => {
  expect(1 + 2).toBe(3);
});

Simulation de modules

// Jest
jest.mock('./myModule');
const myModule = require('./myModule');

it('should return mock implementation when called', () => {
  myModule.someMethod.mockReturnValue('mocked');
  expect(myModule.someMethod()).toBe('mocked');
});

// Vitest
import { test, expect } from 'vitest';
import { vi } from 'vitest';

vi.mock('./myModule');

test('should return mock implementation when called', () => {
  (vi.mocked(require('./myModule')) as any).someMethod.mockReturnValue('mocked');
  expect(require('./myModule').someMethod()).toBe('mocked');
});

Quand choisir Jest vs Vitest

• Jest : Pour des projets plus traditionnels, nécessitant une grande variété de fonctionnalités et un écosystème mature.
• Vitest : Pour des projets modernes, nécessitant des performances optimisées et une configuration rapide.

Verdict

• Jest est le choix pour les projets traditionnels et ceux nécessitant une large variété de fonctionnalités.
• Vitest est idéal pour les projets modernes et performants, grâce à sa performance optimisée et à son intégration avec Vite.