Guida alla migrazione

Migrazione da Jest

Vitest è stato progettato con un'API compatibile con Jest, per semplificare il più possibile la migrazione. Nonostante questi sforzi, potresti comunque riscontrare alcune differenze:

Variabili globali come impostazione predefinita

Jest ha la sua API globale abilitata di default. Vitest no. Puoi abilitare le variabili globali tramite l'impostazione di configurazione globals oppure aggiornare il codice per utilizzare gli import dal modulo vitest.

Se scegli di mantenere disabilitate le variabili globali, tieni presente che librerie comuni come testing-library non eseguiranno la pulizia automatica del DOM.

Simulazione dei moduli

Quando si simula un modulo in Jest, l'export predefinito è il valore di ritorno dell'argomento factory. In Vitest, l'argomento factory deve restituire un oggetto con ogni export definito esplicitamente. Ad esempio, il seguente jest.mock deve essere aggiornato come segue:

- jest.mock('./some-path', () => 'hello')
+ vi.mock('./some-path', () => ({
+   default: 'hello',
+ })

Per maggiori dettagli, consulta la sezione dell'API vi.mock.

Comportamento di auto-simulazione

A differenza di Jest, i moduli simulati nella directory <root>/__mocks__ non vengono caricati automaticamente a meno che non venga esplicitamente chiamato vi.mock(). Se è necessario simularli in ogni test, come avviene in Jest, puoi farlo all'interno del file setupFiles.

Importazione della versione originale di un pacchetto simulato

Se stai simulando solo parzialmente un pacchetto, potresti aver utilizzato la funzione requireActual di Jest. In Vitest, dovresti sostituire queste chiamate con vi.importActual.

- const { cloneDeep } = jest.requireActual('lodash/cloneDeep')
+ const { cloneDeep } = await vi.importActual('lodash/cloneDeep')

Variabili d'ambiente

Come Jest, Vitest imposta la variabile NODE_ENV su test se non era già stata impostata. Vitest fornisce una variabile equivalente a JEST_WORKER_ID, chiamata VITEST_POOL_ID (sempre minore o uguale a maxThreads). Se utilizzi JEST_WORKER_ID, devi rinominarla in VITEST_POOL_ID. Vitest espone anche VITEST_WORKER_ID, che è un ID univoco di un worker in esecuzione - questo numero non è influenzato da maxThreads e aumenta con ogni worker creato.

Se vuoi modificare le variabili d'ambiente, in Jest useresti replaceProperty API, in Vitest puoi usare vi.stubEnv.

Callback di completamento

A partire dalla versione 0.10.0 di Vitest, l'utilizzo di callback per la dichiarazione dei test non è più raccomandato. Puoi riscriverli per utilizzare funzioni async/await oppure utilizzare Promise per imitare lo stile di callback.

- it('should work', (done) => {
+ it('should work', () => new Promise(done => {
    // ...
    done()
- })
+ }))

Hook

In Vitest, le funzioni di hook beforeAll/beforeEach possono restituire una funzione di teardown. Pertanto, potrebbe essere necessario modificare le dichiarazioni degli hook se restituiscono un valore diverso da undefined o null.

- beforeEach(() => setActivePinia(createTestingPinia()))
+ beforeEach(() => { setActivePinia(createTestingPinia()) })

Tipi

Vitest non espone molti tipi nello spazio dei nomi Vi, che è principalmente destinato alla compatibilità con i matcher. Pertanto, potrebbe essere necessario importare i tipi direttamente da vitest invece di fare affidamento sullo spazio dei nomi Vi.

- let fn: jest.Mock<string, [string]>
+ import type { Mock } from 'vitest'
+ let fn: Mock<[string], string>

Inoltre, Vitest ha il tipo Args come primo argomento invece di Returns, come puoi vedere nella differenza.

Timer

Vitest non supporta i timer legacy di Jest.

Snapshot Vue

Questa non è una funzionalità esclusiva di Jest, ma se in precedenza utilizzavi Jest con il preset vue-cli, dovrai installare il pacchetto jest-serializer-vue e utilizzarlo all'interno di setupFiles:

vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    setupFiles: ['./tests/unit/setup.js'],
  },
});

tests/unit/setup.js

import vueSnapshotSerializer from 'jest-serializer-vue';

expect.addSnapshotSerializer(vueSnapshotSerializer);

Altrimenti, gli snapshot conterranno molti caratteri " con escape.