Setup a sample test [CI SKIP]

.eslintrc.js

@@ -3,6 +3,9 @@ module.exports = {
         ecmaVersion: 2021,
         sourceType: 'module'
     },
+    env: {
+        browser: true,
+    },
     plugins: [
         'react',
         'react-hooks'
@@ -13,6 +16,9 @@ module.exports = {
         'plugin:react/jsx-runtime',
         'plugin:react-hooks/recommended'
     ],
+    rules: {
+        'react/no-unescaped-entities': 0
+    },
     settings: {
         react: {
             version: 'detect'

README.md

@@ -15,6 +15,7 @@ Une fois le dépôt cloné :
 npm install # Installe les dépendances
 npm run build # Construit l'application
 npm run dev # Démarre le serveur de développement
+npm run test # Lance les tests
 ```
 
 ## Contribuer

package.json

@@ -28,5 +28,8 @@
     "test": "vitest",
     "dev": "vite",
     "lint": "eslint src/**/*.{js,jsx}"
+  },
+  "devDependencies": {
+    "jsdom": "^21.1.0"
   }
 }

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/components/login/Login.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import '../../css/login.css'
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 

src/components/main/Main.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import '../../css/main.css'
 
 export function MainPage() {

src/components/register/Register.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import '../../css/login.css'
 import { library } from '@fortawesome/fontawesome-svg-core';
 

test/App.test.jsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+import { describe, test, expect } from 'vitest';
+
+const App = () => <div>learn react</div>
+
+describe('Application', function () {
+    test('renders learn react link', () => {
+        const { getByText } = render(<App />);
+        const linkElement = getByText(/learn react/i);
+        expect(linkElement).toBeInTheDocument();
+    });
+});

test/setupTests.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

vite.config.js

@@ -6,7 +6,7 @@ import fs from 'fs/promises';
 export default defineConfig({
     esbuild: {
         loader: "jsx",
-        include: /src\/.*\.jsx?$/,
+        include: /(src|test)\/.*\.jsx?$/,
         exclude: [],
     },
     build: {
@@ -15,19 +15,18 @@ export default defineConfig({
     test: {
         globals: true,
         environment: 'jsdom',
+        setupFiles: './test/setupTests.js'
     },
-    plugins: [react({
-        loader: { '.js': 'jsx' },
-    })],
+    plugins: [react()],
     optimizeDeps: {
         esbuildOptions: {
             plugins: [
                 {
-                    name: "load-js-files-as-jsx",
+                    name: 'load-js-files-as-jsx',
                     setup(build) {
-                        build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
-                            loader: "jsx",
-                            contents: await fs.readFile(args.path, "utf8"),
+                        build.onLoad({ filter: /(src|test)\/.*\.js$/ }, async (args) => ({
+                            loader: 'jsx',
+                            contents: await fs.readFile(args.path, 'utf8'),
                         }));
                     },
                 },