Merge pull request #795 from Lemoncode/feature/update-testing-react

Feature/update testing react

Author: nasdan

05-testing/01-react/01-base/00-boilerplate/.gitignore

@@ -1,10 +1,8 @@
 node_modules
 dist
 coverage
-.awcache
 test-report.*
 junit.xml
 *.log
 *.orig
-.awcache
 public

05-testing/01-react/01-base/00-boilerplate/package-lock.json

@@ -10,21 +10,24 @@
     "type-check:watch": "npm run type-check -- --watch",
     "clean": "rimraf dist"
   },
+  "imports": {
+    "#*": "./src/*"
+  },
   "author": "Lemoncode",
   "license": "MIT",
   "dependencies": {
-    "axios": "^1.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "axios": "^1.7.9",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/node": "^18.17.12",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.4",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.1",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9"
+    "rimraf": "^6.0.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
   }
 }

05-testing/01-react/01-base/00-boilerplate/package.json

@@ -13,7 +13,7 @@
     "esModuleInterop": true,
     "baseUrl": "./src/",
     "paths": {
-      "@/*": ["*"]
+      "#*": ["*"]
     }
   },
   "include": ["./src/**/*"]

05-testing/01-react/01-base/00-boilerplate/tsconfig.json

@@ -1,12 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { fileURLToPath, URL } from "node:url";
 
 export default defineConfig({
   plugins: [react()],
-  resolve: {
-    alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
-    },
-  },
 });

05-testing/01-react/01-base/00-boilerplate/vite.config.ts

@@ -1,10 +1,8 @@
 node_modules
 dist
 coverage
-.awcache
 test-report.*
 junit.xml
 *.log
 *.orig
-.awcache
 public

05-testing/01-react/01-base/01-config/.gitignore

@@ -1,15 +1,15 @@
 # 01 Config
 
-In this example we are going to add a basic setup needed to support unit testing with Jest.
+In this example we are going to add a basic setup needed to support unit testing with Vitest.
 
 We will start from `00-boilerplate`.
 
 Summary steps:
 
-- Install `jest`.
+- Install `vitest`.
 - Add configuration.
 - Add dummy spec.
-- External jest config file.
+- External vitest config file.
 
 # Steps to build it
 
@@ -21,40 +21,32 @@ npm install
 
 # Libraries
 
-- We are going to install the main library which we base all our unit tests, [Jest](https://facebook.github.io/jest/en/).
+- We are going to install the main library which we base all our unit tests, [Vitest](https://vitest.dev/).
 
-- [jest](https://github.com/facebook/jest): JavaScript Testing library with runner, assertion, mocks, etc.
-- [@types/jest](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/df38f202a0185eadfb6012e47dd91f8975eb6151/types/jest): Typings for jest.
+- [vitest](https://github.com/vitest-dev/vitest): JavaScript Testing library with runner, assertion, mocks, etc.
+
+> Jest it's a good option for React projects, but it doesn't support [ECMAScript Modules](https://jestjs.io/docs/ecmascript-modules) yet.
+>
+> [Migration from Jest](https://vitest.dev/guide/migration.html#migrating-from-jest)
 
 ```bash
-npm install jest @types/jest --save-dev
+npm install vitest --save-dev
 ```
 
-> If we are using `@babel/preset-typescript` it is not necessary install [ts-jest](https://github.com/kulshekhar/ts-jest): A preprocessor with sourcemap support to help use TypeScript with Jest.
->
-> [Official docs](https://jestjs.io/docs/getting-started#using-typescript)
->
-> NOTE: [Since jest v29.x it drops support for Node 12](https://github.com/facebook/jest/releases/tag/v29.0.0)
-
 # Config
 
-Jest test commands:
-  - `npm test`: to single run
-  - `npm run test:watch`: to run all specs after changes.
-
-> NOTE:
-
-> [Jest CLI options](https://facebook.github.io/jest/docs/en/cli.html#options)
+Test commands:
+  - `npm test`: it will run all specs in watch mode (by default). But it depends on the [process.env.CI](https://vitest.dev/config/#watch)
 
-> --watchAll To rerun all tests.
-
-> --watch To rerun tests related to changed files.
-
-> --verbose Display individual test results with the test suite hierarchy.
-
-> -i or --runInBand Run all tests serially in the current process, rather than creating a worker pool of child processes that run tests. This can be useful for debugging
+> NOTES:
+>
+> [CLI options](https://vitest.dev/guide/cli.html#options)
+>
+> [--watch](https://vitest.dev/guide/cli.html#watch): Enable watch mode
+>
+> [--globals](https://vitest.dev/guide/cli.html#globals): Inject Vitest methods into global scope
 
-### ./package.json
+_./package.json_
 
 ```diff
 {
@@ -63,8 +55,7 @@ Jest test commands:
     ...
 -   "clean": "rimraf dist"
 +   "clean": "rimraf dist",
-+   "test": "jest --verbose",
-+   "test:watch": "npm test -- --watchAll -i"
++   "test": "vitest --globals"
   },
   ...
 }
@@ -75,12 +66,12 @@ Jest test commands:
 Let's launch tests in watch mode:
 
 ```bash
-npm run test:watch
+npm test
 ```
 
 Adding success spec:
 
-### ./src/dummy.spec.ts
+_./src/dummy.spec.ts_
 
 ```javascript
 describe('dummy specs', () => {
@@ -95,9 +86,36 @@ describe('dummy specs', () => {
 });
 ```
 
+We could see that TypeScript doesn't recognize `vitest` methods, we need to add a `vitest` type definition:
+
+_./vitest.d.ts_
+
+```ts
+/// <reference types="vitest/globals" />
+
+```
+
+And add it to `tsconfig.json`:
+
+_./tsconfig.json_
+
+```diff
+{
+  ...
+  },
+- "include": ["./src/**/*"]
++ "include": ["./src/**/*", "./vitest.d.ts"]
+}
+
+```
+
+> Sometimes we need to restart the editor to recognize the new type definition
+>
+> Control/Command + Shift + P -> TypeScript: Restart TS server
+
 Adding failed spec:
 
-### ./src/dummy.spec.ts
+_./src/dummy.spec.ts_
 
 ```diff
 describe('dummy specs', () => {
@@ -125,35 +143,61 @@ describe('dummy specs', () => {
 
 We could create a jest config outside `package.json` to improve maintainability.
 
-> [Jest configuration options](https://facebook.github.io/jest/docs/en/configuration.html#options)
+> [Config file](https://vitest.dev/config/)
 
-Create config in `config/test/jest.js` file:
+Create config in `config/test/config.ts` file:
 
-### ./config/test/jest.js
+_./config/test/config.ts_
 
 ```js
-export default {
-  rootDir: '../../',
-  verbose: true,
-};
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+  },
+});
 
 ```
-> Check `verbose: false` to see differences
->
-> We will add some configuration in next examples when needed
 
-And use that file:
+> We will add more configuration in next examples when needed
+
+Move also the `.d.ts` file:
+
+_./config/test/config.d.ts_
+
+```ts
+/// <reference types="vitest/globals" />
+
+```
+
+> Remove the ./vitest.d.ts file
+
+And update the `tsconfig.json`:
 
-### ./package.json
+_./tsconfig.json_
+
+```diff
+{
+  ...
+  },
+- "include": ["./src/**/*", "./vitest.d.ts"]
++ "include": ["./src/**/*", "./config/test/config.d.ts"]
+}
+
+```
+
+Update the `package.json`:
+
+_./package.json_
 
 ```diff
 {
   ...
   "scripts": {
     ...
--   "test": "jest --verbose",
-+   "test": "jest -c ./config/test/jest.js",
-    "test:watch": "npm run test -- --watchAll -i"
+-   "test": "vitest --globals"
++   "test": "vitest -c ./config/test/config.ts"
   },
   ...
 }
@@ -162,9 +206,11 @@ And use that file:
 Running specs again:
 
 ```bash
-npm run test:watch
+npm test
 ```
 
+> We could update the globals property in the config file to `false` to see the difference
+
 # About Basefactor + Lemoncode
 
 We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.