Migré de Jest a Vitest en menos de 3 horas

🤔 ¿Por qué?

⚒️ Mi stack actual

• Gatsby + Typescript sobre Node 18
• Jest
• React test utils
• Eslint + Prettier

⚙️ Instalación y creando tu archivo de configuración

1
npm install -D vitest

1
npm install -D @vitejs/plugin-react @vitest/coverage-c8 jsdom

Configuración para Typescript

1
{
2
  "compilerOptions": {
3
    ...
4
    "types": [
5
      "vitest/globals"
6
    ]
7
  }
8
}

vitest.config.ts

1
import { defineConfig } from 'vitest/config';
2
import react from '@vitejs/plugin-react';
3

4
export default defineConfig({
5
  plugins: [react()],
6
  test: {
7
    globals: true,
8
    environment: 'jsdom',
9
    setupFiles: './vitest-setup.ts',
10
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
11
    coverage: {
12
      reporter: ['html', 'json', 'text'],
13
    },
14
  },
15
});

• La función react() , dentro de la sección de plugins, agrega soporte para la sintaxis de React.
• La propiedad globals establece todas las funciones comunes de prueba, como globales, entre ellas describe, it, expects y así sucesivamente.
• environment como jsdom . Puedes comprobar cuando instalamos la biblioteca, agregará soporte para consultar el DOM cuando trabajamos con react-test-utils.
• La propiedad setupFiles hace referencia a ./vitest-setup.ts. Un archivo que cubriremos en profundidad más adelante.
• En la parte include, puede agregar una expresión regular de formatos y nombres de archivos que se observarán en el comando de prueba. Como puedes ver, he agregado soporte incluso a mjs, cjs, sintaxis de módulo para futures versiones de Javascript.
• coverage, donde puedes especificar los formatos de reporte de la herramienta de coverage

vitest-setup.ts

1
import { afterEach } from 'vitest';
2
import '@testing-library/jest-dom';
3
import matchers from '@testing-library/jest-dom/matchers';
4
import { cleanup } from '@testing-library/react';
5

6
expect.extend(matchers);
7

8
afterEach(() => {
9
  cleanup();
10
});

♻️ Actualizando los Mocks

Reemplaza jest con vi

1
import React from 'react';
2
+ import { vi } from 'vitest';
3

4
- export default jest.fn().mockImplementation(({ children }) => React.createElement('div', null, children));
5
+ export default vi.fn().mockImplementation(({ children }) => React.createElement('div', null, children));

Reemplaza requireActual con importActual

1
import React from 'react';
2
- const gatsby = jest.requireActual('gatsby');
3
+ import { vi } from 'vitest';
4

5
+ const gatsby = await vi.importActual<object>('gatsby');
6

7
const mockImage = ({ imgClassName, ...props }) => React.createElement('img', { ...props, className: imgClassName });
8

9
module.exports = {
10
  ...gatsby,
11
-  graphql: jest.fn(),
12
-  Link: jest.fn().mockImplementation(mockLink),
13
-  StaticQuery: jest.fn(),
14
-  useStaticQuery: jest.fn(),
15
-  GatsbyImage: jest.fn().mockImplementation(mockImage),
16
-  StaticImage: jest.fn().mockImplementation(mockImage),
17
+  graphql: vi.fn(),
18
+  Link: vi.fn().mockImplementation(mockLink),
19
+  StaticQuery: vi.fn(),
20
+  useStaticQuery: vi.fn(),
21
+  GatsbyImage: vi.fn().mockImplementation(mockImage),
22
+  StaticImage: vi.fn().mockImplementation(mockImage),
23
};

Antes de usar cualquier Mock en los tests, llama al Mock

1
vi.mock('gatsby');

1
vi.mock('gatsby');
2
vi.mock('gatsby-plugin-image');
3
vi.mock('react-slick');

Creando un mock antes de cada test

1
import { loadTranslations } from '../../utils/mockresponses';
2
import type { Mock } from 'vitest';
3

4
beforeEach(() => {
5
  (useStaticQuery as Mock).mockReturnValueOnce(loadTranslations);
6
});

¿Cambiando spyes?, usa vi.spyOn

1
- const getItemMock = jest.spyOn(window.localStorage.__proto__, 'getItem');
2
+ const getItemMock = vi.spyOn(window.localStorage.__proto__, 'getItem');

⏬ Actualizando comandos de NPM

1
{
2
	"scripts": {
3
		...
4
    "test": "vitest",
5
    "test:ci": "vitest run",
6
    "test:cov": "vitest run --coverage"
7
  },
8
}

🔨 Github Actions

1
name: Tests
2
on:
3
  pull_request:
4
    branches:
5
      - main
6
jobs:
7
  coverage:
8
    name: Coverage
9
    runs-on: ubuntu-latest
10
    env:
11
      NODE_OPTIONS: --max-old-space-size=4096
12
    steps:
13
      - uses: actions/checkout@v3
14
      - uses: actions/setup-node@v3
15
        with:
16
          node-version-file: '.nvmrc'
17
          cache: npm
18
      - name: Installing dependencies
19
        run: npm ci
20
      - name: Running tests
21
        run: npm run test:cov

🗑️ Remueve las referencias a Jest

• @types/jest
• babel-jest
• jest
• ts-jest
• Adicionalmente, removí tres archivos de configuración desde la raíz de mi proyecto.

🏎️ Corriendo tests y comparando la velocidad

☑️ Conclusión

🔗 Enlaces externos

• https://www.lekoarts.de/garden/testing-gatsby-s-head-api-with-vitest-and-playwright
• https://www.robinwieruch.de/vitest-react-testing-library/