Bonjour,

Je travaille sur un projet utilisant ViteJS et VueJS, et j'ai intégré Vitest pour les tests unitaires. J'ai suivi un tutoriel où il fallait ajouter certaines configurations pour qu'ESLint reconnaisse les fonctions de test Vitest (test, décrire, attendre, etc.) comme des variables globales et ne les souligne pas en rouge.

1- Dans le fichier vite.config.js, j'ai ajouté la configuration pour Vitest comme ceci :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
export default defineConfig({
  // Other configurations...
  test: {
    globals: true,
  },
});

2- Suppression de l'importation de test dans le fichier de test (exemple.spec.js), le fichier ressemble donc maintenant à ceci*:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
test('sanity test', () => {
  expect(true).toBe(true);
});

3- Ajout d'une règle dans .eslintrc.js pour reconnaître les fonctions de test comme variables globales dans les fichiers de test situés dans un dossier spécifique :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
  // Other ESLint configurations...
  overrides: [
    {
      files: ['src/components/_tests_/**.spec.js'],
      globals: {
        test: 'readonly',
        describe: 'readonly',
        expect: 'readonly',
        vi: 'readonly',
        beforeEach: 'readonly',
        it: 'readonly',
      },
    },
  ],
};

Malgré ces configurations, ESLint continue de souligner test() en rouge dans mon fichier exemple.spec.js, suggérant qu'il ne reconnaît pas test comme variable globale.
Script:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
 "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test:unit": "vitest --environment jsdom --ui",

Environment:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
"devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@vitejs/plugin-vue": "^4.3.4",
    "@vitest/ui": "^1.3.0",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/test-utils": "^2.4.1",
    "autoprefixer": "^10.4.16",
    "cypress": "^13.2.0",
    "eslint": "^8.49.0",
    "eslint-plugin-cypress": "^2.15.1",
    "eslint-plugin-vue": "^9.17.0",
    "jsdom": "^22.1.0",
    "postcss": "^8.4.31",
    "prettier": "^3.0.3",
    "start-server-and-test": "^2.0.0",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.9",
    "vite-plugin-pwa": "^0.17.0",
    "vitest": "^1.3.0"
  }
J'ai essayé de redémarrer mon éditeur de code, vérifié que les chemins dans les configurations sont corrects et que toutes les dépendances sont à jour, mais le problème persiste.

J'ajoute que lorsque j'exécute la commande 'npm run test:unit', le résultat du test est "réussi".

Quelqu'un a-t-il rencontré ce problème ou a-t-il une idée de comment le résoudre ?

Merci d'avance pour votre aide.