{"slug": "configuracion-de-vitest-react-testing-library", "title": "Configuración de Vitest + React Testing Library", "summary": "The article provides a step-by-step guide for setting up Vitest with React Testing Library in a Vite project. It instructs users to install necessary dependencies (vitest, jsdom, and testing library packages), add specific test scripts to the package.json file, and configure the vite.config.ts file with jsdom as the test environment and globals enabled.", "body_md": "# Instalar dependencias Testing\n\n1. [Vitest](https://vitest.dev/guide/)\n\n```bash\nnpm install --save-dev vitest jsdom\n```\n\n2. React [Testing Library](https://testing-library.com/docs/react-testing-library/intro)\n\n```bash\nnpm install --save-dev @testing-library/react @testing-library/dom\n```\n\n- Todo en un sólo comando\n\n```bash\nnpm install --save-dev @testing-library/react @testing-library/dom vitest jsdom\n```\n\n3. Crear estos scripts en el `package.json`\n\n```json\n\"scripts\": {\n  \"test\": \"vitest\",\n  \"test:ui\": \"vitest --ui\",\n  \"coverage\": \"vitest run --coverage\"\n}\n```\n\n4. Configurar `vite.config.ts`\n```ts\nimport { defineConfig } from 'vitest/config';\nimport react from '@vitejs/plugin-react-swc';\n\n// https://vite.dev/config/\nexport default defineConfig({\n  plugins: [react()],\n  test: {\n    environment: 'jsdom',\n    globals: true,\n  },\n});\n```\n", "url": "https://wpnews.pro/news/configuracion-de-vitest-react-testing-library", "canonical_source": "https://gist.github.com/Klerith/3a3d8df27c19755c829ee5c0cef55a55", "published_at": "2025-06-17 15:33:00+00:00", "updated_at": "2026-05-23 22:05:33.100569+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Vitest", "React Testing Library", "jsdom", "Vite"], "alternates": {"html": "https://wpnews.pro/news/configuracion-de-vitest-react-testing-library", "markdown": "https://wpnews.pro/news/configuracion-de-vitest-react-testing-library.md", "text": "https://wpnews.pro/news/configuracion-de-vitest-react-testing-library.txt", "jsonld": "https://wpnews.pro/news/configuracion-de-vitest-react-testing-library.jsonld"}}