Tests unitaires angulaires 2: impossible de trouver le nom «décrire»

213

Je suis ce tutoriel de angular.io

Comme ils l'ont dit, j'ai créé le fichier hero.spec.ts pour créer des tests unitaires:

import { Hero } from './hero';
describe('Hero', () => {
  it('has name', () => {
    let hero: Hero = {id: 1, name: 'Super Cat'};
    expect(hero.name).toEqual('Super Cat');
  });
  it('has id', () => {
    let hero: Hero = {id: 1, name: 'Super Cat'};
    expect(hero.id).toEqual(1);
  });
});

Les tests unitaires fonctionnent comme un charme. Le problème est: je vois quelques erreurs, qui sont mentionnées dans le tutoriel:

Notre éditeur et le compilateur peuvent se plaindre qu'ils ne savent pas quoi it et expectparce qu'ils n'ont pas les fichiers de frappe qui décrivent Jasmine. Nous pouvons ignorer ces plaintes ennuyeuses pour l'instant car elles sont inoffensives.

Et ils l'ont en effet ignoré. Même si ces erreurs sont inoffensives, cela ne semble pas bon dans ma console de sortie lorsque j'en reçois un tas.

Exemple de ce que j'obtiens:

Impossible de trouver le nom «décrire».

Impossible de trouver le nom «it».

Impossible de trouver le nom «attendre».

Que puis-je faire pour le réparer?

Piotrek
la source
Vous pouvez voter sur Github pour corriger ce bug: github.com/TypeStrong/atom-typescript/issues/1125
Lucas Cimon

Réponses:

387

J'espère que vous avez installé -

npm install --save-dev @types/jasmine

Mettez ensuite l'import suivant en haut du hero.spec.tsfichier -

import 'jasmine';

Cela devrait résoudre le problème.

ksharifbd
la source
3
Selon la version de Typescript requise, vous devrez peut-être installer une version antérieure. Par exemple, pour ionic v2.2.1 que j'utilise actuellement et qui utilise le typecript v2.0.9, je devais l'installer @types/[email protected]. Sinon, vous pouvez voir ces erreurs de compilation .
Tony O'Hagan
18
Vous pouvez simplement importer le module pour ses effets secondaires:import 'jasmine';
camolin3
8
Que fait-il import {} from 'jasmine';réellement? Est-ce la même chose que import 'jasmine'?
TetraDev
2
EN ANGULAIRE 6.0.3: Je viens d'importer "import {} de jasmin" et cela a encore fonctionné
Eduardo Cordeiro
2
@aesede Quelle version de PS utilisez-vous? Je viens d'exécuter la commande sans guillemets et ça s'est bien passé.
Konrad Viltersten
162

Avec [email protected] ou version ultérieure, vous pouvez installer des types avec:

npm install -D @types/jasmine

Importez ensuite les types automatiquement en utilisant l' typesoption dans tsconfig.json:

"types": ["jasmine"],

Cette solution ne nécessite pas import {} from 'jasmine';dans chaque fichier de spécifications.

Jiayi Hu
la source
9
Selon les documents TypeScript pour tsconfig.json (v2.1 pour le moment), il n'est plus nécessaire d'ajouter la "types": ["jasmine"]ligne. "Par défaut, tous les packages" @types "visibles sont inclus dans votre compilation. Les packages dans les types node_modules / @ de tout dossier englobant sont considérés comme visibles; en particulier, cela signifie que les packages dans ./node_modules/@types/, ../node_modules/@ types /, ../../node_modules/@types/, etc. "
bholben
12
@bholben Je sais, mais pour une raison nodeet des jasminetypes qui ne sont pas détectés. Au moins, cela ne fonctionne pas pour moi et j'utilise [email protected]
Jiayi Hu
2
Cette solution ne fonctionne pas pour moi :( désolé. Je l'ai utilisée dans ang-app/e2e/tsconfig.json. Je l'ai essayée dans tous les niveaux json . Pourriez-vous s'il vous plaît ajouter plus de détails?
Sergii
Cela ne fonctionnerait pas lors de l'utilisation de webpack - dans ce cas, la bibliothèque réelle doit être servie - l'importation {} de 'jasmine' pousse la bibliothèque à travers
Bogdan
Cela a fonctionné pour moi, mais j'ai également dû mettre à niveau mon texte dactylographié global vers 3.5.3 (de 2.5)
jsaddwater
27
npm install @types/jasmine

Comme mentionné dans certains commentaires, le "types": ["jasmine"]n'est plus nécessaire, tous les @typespackages sont automatiquement inclus dans la compilation (depuis la v2.1 je pense).

À mon avis, la solution la plus simple est d'exclure les fichiers de test dans votre tsconfig.json comme:

"exclude": [
    "node_modules",
    "**/*.spec.ts"
]

Cela fonctionne pour moi.

Plus d'informations dans les documents officiels de tsconfig .

lenny
la source
3
juste une note: de nouveaux projets angulaires ont src/tsconfig.app.json, src/tsconfig.spec.jsonet tsconfig.json. La section "exclure" mentionnée fait partie de la première. "types": [ "jasmine" ]partie du 2e.
Martin Schneider
2
Notez que dans VS Code, vous perdez la possibilité de trouver des références dans vos fichiers de spécifications, car ils ne seront pas considérés comme faisant partie du projet.
mleu
@mleu Je suis confronté au même problème. Comment avez-vous résolu ce problème? Chaque fois lors de l'écriture du scénario de test, je dois supprimer le modèle de fichiers de spécifications du excludebloc.
Shishir Anshuman
@ShishirAnshuman: Je n'ai pas trouvé de solution et j'ai dû vivre avec cette limitation jusqu'à la fin du projet.
mleu
@mleu Oh. Pas de problème. Dans mon projet, comme solution de contournement, j'ai supprimé le modèle de fichier de spécification du excludebloc tsconfig . Ensuite, j'ai créé un nouveau tsconfig.build.jsonfichier avec le modèle de fichier spec ajouté au excludebloc. Maintenant, dans mes ts-loaderoptions (dans le webpack.config) j'utilise tsconfig.build.json. Avec ces configurations, les modules sont en cours de résolution dans les fichiers de test et lors de la création de la construction ou du démarrage du serveur, les fichiers de test sont exclus.
Shishir Anshuman
13

Vous devez installer des typages pour le jasmin. En supposant que vous utilisez une version relativement récente de dactylographié 2, vous devriez pouvoir faire:

npm install --save-dev @types/jasmine
Rythme
la source
8

Avec [email protected] ou ultérieur, vous pouvez installer des types avec npm install

npm install --save-dev @types/jasmine

puis importer les types automatiquement à l'aide typeRoots option tsconfig.json.

"typeRoots": [
      "node_modules/@types"
    ],

Cette solution ne nécessite pas l'importation {} de 'jasmine'; dans chaque fichier de spécifications.

mvermand
la source
1
Malheureusement, cela ne fonctionne pas. Il montre toujours les erreurs dans les fichiers de spécifications
dave0688
3

La solution à ce problème est liée à ce que @Pace a écrit dans sa réponse. Cependant, cela n'explique pas tout, donc, si cela ne vous dérange pas, je vais l'écrire moi-même.

SOLUTION:

Ajout de cette ligne:

///<reference path="./../../../typings/globals/jasmine/index.d.ts"/>

au début du hero.spec.tsfichier corrige le problème. Le chemin mène au typingsdossier (où toutes les saisies sont stockées).

Pour installer les typages, vous devez créer un typings.jsonfichier à la racine de votre projet avec le contenu suivant:

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160807145350"
  }
}

Et exécutez typings install(où typingsest le package NPM).

Piotrek
la source
3
c'est une façon non standard de le faire. les règles tslint par défaut empêcheront les chemins de référence. utiliser le fichier tsconfig pour pointer vers node_modules
FlavorScape
3

Dans mon cas, était d'enlever la solution la typeRootsdans montsconfig.json .

Comme vous pouvez le lire dans la doc TypeScript

Si typeRoots est spécifié, seuls les packages sous typeRoots seront inclus.

moppag
la source
3

Je suis à la dernière date d'aujourd'hui et j'ai trouvé que la meilleure façon de résoudre ce problème est de ne rien faire ... non typeRootsnon typesnon excludenon includetous les paramètres par défaut semblent très bien fonctionner. En fait, cela n'a pas fonctionné pour moi jusqu'à ce que je les supprime tous. J'ai eu:

"exclude": [
    "node_modules"
]

mais c'est dans les valeurs par défaut, donc j'ai supprimé cela.

J'ai eu:

"types": [
    "node"
]

pour passer un avertissement du compilateur. Mais maintenant, je l'ai supprimé aussi.

L'avertissement qui ne devrait pas être: error TS2304: Cannot find name 'AsyncIterable'. denode_modules\@types\graphql\subscription\subscribe.d.ts

ce qui est très désagréable donc j'ai fait ça dans tsconfig pour qu'il le charge:

"compilerOptions": {
    "target": "esnext",
}

car il est dans l'ensemble esnext. Je ne l'utilise pas directement, donc pas de soucis de compatibilité pour l'instant. J'espère que ça ne me brûlera pas plus tard.

philn5d
la source
Vous n'avez pas besoin d'ajouter "types": ["node"]dans , tsconfig.jsonmais vous devez ajouter ce type dans tsconfig.app.json! Je pense que vous ne devriez plus avoir cet avertissement. Vous pouvez garder "target": "es5"ou "target": "es6"maintenant.
Christophe Chevalier
2

Il suffisait de faire ce qui suit pour récupérer les @types dans un Lerna Mono-repo où plusieurs node_modules existent.

npm install -D @types/jasmine

Puis dans chaque fichier tsconfig.file de chaque module ou application

"typeRoots": [
  "node_modules/@types",
  "../../node_modules/@types" <-- I added this line
],
SoEzPz
la source
Par défaut, tous les packages «@types» visibles sont inclus dans votre compilation. Les packages des types node_modules / @ de tout dossier englobant sont considérés comme visibles; en particulier, cela signifie les packages dans ./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/, etc. Voir la documentation officielle
Christophe Chevalier
1

Pour que le compilateur TypeScript utilise toutes les définitions de type visibles pendant la compilation, types option doit être complètement supprimée du compilerOptionschamp du tsconfig.jsonfichier.

Ce problème se pose lorsqu'il existe des types entrées dans le compilerOptionschamp, où en même temps l' jestentrée est manquante.

Ainsi, afin de résoudre le problème, le compilerOptionschamp dans votre champ tscongfig.jsondoit soit inclure jestdans la typeszone, soit vous en débarrasser typescomplètement:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "types": ["reflect-metadata", "jest"],  //<--  add jest or remove completely
    "moduleResolution": "node",
    "sourceMap": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}
Omer Gurarslan
la source
Cela a fonctionné pour moi, j'avais google map typesen typesoption. Après avoir complètement supprimé l'option, cela a bien fonctionné.
pritesh agrawal
1

Je vais juste ajouter une réponse pour ce qui fonctionne pour moi dans "typescript": "3.2.4" J'ai réalisé que le jasmin dans les types node_modules / @ il y a un dossier pour ts3.1 sous le type jasmine alors voici les étapes: -

  • Installer le type jasmine npm install -D @types/jasmine
  • Ajouter à tsconfig.json jasmine / ts3.1

    "typeRoots": [ ... "./node_modules/jasmine/ts3.1" ],

  • Ajouter du jasmin aux types

    "types": [ "jasmine", "node" ],

Remarque: plus besoin de celaimport 'jasmine';.

Eslam Mahgoub
la source
1

Dans mon cas, j'obtenais cette erreur lorsque je sers l'application, pas lors des tests. Je ne savais pas que j'avais un paramètre de configuration différent dans mon fichier tsconfig.app.json.

J'avais auparavant ceci:

{
  ...
  "include": [
    "src/**/*.ts"
  ]
}

Il incluait tous mes .spec.tsfichiers lors du service de l'application. J'ai changé d' include property toexclusion` et ajouté une expression régulière pour exclure tous les fichiers de test comme ceci:

{
  ...
  "exclude": [
    "**/*.spec.ts",
    "**/__mocks__"
  ]
}

Maintenant, cela fonctionne comme prévu.

King James Enejo
la source
0

Regardez l'importation, vous avez peut-être une dépendance de cycle , c'était dans mon cas l'erreur, l'utilisation import {} from 'jasmine';corrigera les erreurs dans la console et rendra le code compilable mais ne supprime pas la racine du diable (dans mon cas, la dépendance de cycle).

G.Vitelli
la source
0

Je suis sur Angular 6, Typescript 2.7, et j'utilise le framework Jest pour tester les unités. J'avais @types/jestinstallé et ajouté à l' typeRootsintérieurtsconfig.json

Mais toujours l'erreur d'affichage ci-dessous (c'est-à-dire: sur le terminal il n'y a pas d'erreur)

impossible de trouver le nom décrire

Et en ajoutant l'importation:

import {} from 'jest'; // in my case or jasmine if you're using jasmine

ne fait rien techniquement, donc je pensais qu'il y avait une importation quelque part causant ce problème, alors j'ai trouvé que si supprimer le fichier

tsconfig.spec.json

dans le src/ dossier, a résolu le problème pour moi. Comme @types est importé avant dans les rootTypes.

Je vous recommande de faire de même et de supprimer ce fichier, aucune configuration nécessaire n'est à l'intérieur. (ps: si vous êtes dans le même cas que moi)

getName
la source
0

si l'erreur se trouve dans le fichier .specs app / app.component.spec.ts (7,3): erreur TS2304: Impossible de trouver le nom 'beforeEach'.

ajoutez ceci en haut de votre fichier et installez npm rxjs

importer {range} depuis 'rxjs'; importer {map, filter} depuis 'rxjs / operators';

cfphpflex
la source