Discussion :

[haddocks]

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.

[unanonyme]

je vois pas trop non plus.

Côté syntaxe, pour moi il y a un doute à savoir si il ne faudrait pas utiliser languageOptions

comme dans ce ticket,
https://github.com/eslint/eslint/discussions/17193

plutôt que celui ci, comme ton exemple, mais qui est aussi plus ancien,
https://github.com/eslint/eslint/issues/10419

Est ce que ça donne des infos utile d’utiliser le flag --print-config ? le flag --debug ?

https://eslint.org/docs/latest/use/c...--print-config

cf aussi, mode roue de secours..
https://eslint.org/docs/latest/use/c...rface#--global

Tu pourrais aussi tenter de jouer sur la version installée.
Là tu as ^8.49.0, donc la dernière release sur la version 8.x.x (8.56.0 présentement).