From fe6c378648220c1e55a9acf1842b8a73d214f9c1 Mon Sep 17 00:00:00 2001 From: Jonas Aschenbrenner Date: Wed, 6 Nov 2024 22:36:38 +0100 Subject: [PATCH 1/2] Vitest: Support for import aliases when using TypeScript --- .../08-testing/01-vitest.mdx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/docs/01-app/02-building-your-application/08-testing/01-vitest.mdx b/docs/01-app/02-building-your-application/08-testing/01-vitest.mdx index df955c8b250c7..ef141c7826f5a 100644 --- a/docs/01-app/02-building-your-application/08-testing/01-vitest.mdx +++ b/docs/01-app/02-building-your-application/08-testing/01-vitest.mdx @@ -20,7 +20,17 @@ npx create-next-app@latest --example with-vitest with-vitest-app To manually set up Vitest, install `vitest` and the following packages as dev dependencies: -```bash filename="Terminal" +```bash filename="Terminal (for TypeScript)" switcher +npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths +# or +yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths +# or +pnpm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths +# or +bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths +``` + +```bash filename="Terminal (for JavaScript)" switcher npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom # or yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom @@ -30,14 +40,15 @@ pnpm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testin bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom ``` -Create a `vitest.config.ts|js` file in the root of your project, and add the following options: +Create a `vitest.config.mts|js` file in the root of your project, and add the following options: -```ts filename="vitest.config.ts" switcher +```ts filename="vitest.config.mts" switcher import { defineConfig } from 'vitest/config' import react from '@vitejs/plugin-react' +import tsconfigPaths from 'vite-tsconfig-paths' export default defineConfig({ - plugins: [react()], + plugins: [tsconfigPaths(), react()], test: { environment: 'jsdom', }, From bb36ae06de7d473de00b369c6365fa866c13ab54 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Thu, 7 Nov 2024 08:42:19 +0000 Subject: [PATCH 2/2] Simplify setup instructions for TS and JS --- .../08-testing/01-vitest.mdx | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/docs/01-app/02-building-your-application/08-testing/01-vitest.mdx b/docs/01-app/02-building-your-application/08-testing/01-vitest.mdx index ef141c7826f5a..4c1ae50441a65 100644 --- a/docs/01-app/02-building-your-application/08-testing/01-vitest.mdx +++ b/docs/01-app/02-building-your-application/08-testing/01-vitest.mdx @@ -20,24 +20,11 @@ npx create-next-app@latest --example with-vitest with-vitest-app To manually set up Vitest, install `vitest` and the following packages as dev dependencies: -```bash filename="Terminal (for TypeScript)" switcher +```bash filename="Terminal" switcher +# Using TypeScript npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths -# or -yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths -# or -pnpm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths -# or -bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths -``` - -```bash filename="Terminal (for JavaScript)" switcher +# Using JavaScript npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom -# or -yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom -# or -pnpm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom -# or -bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom ``` Create a `vitest.config.mts|js` file in the root of your project, and add the following options: