Angular 2 Unit Tests: Cannot find name 'describe'

Question

I'm following this tutorial from angular.io

As they said, I've created hero.spec.ts file to create unit tests:

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);
  });
});

Unit Tests work like a charm. The problem is: I see some errors, which are mentioned in tutorial:

Our editor and the compiler may complain that they don’t know what it and expect are because they lack the typing files that describe Jasmine. We can ignore those annoying complaints for now as they are harmless.

And they indeed ignored it. Even though those errors are harmless, it doesn't look good in my output console when I receive bunch of them.

Example of what I get:

Cannot find name 'describe'.

Cannot find name 'it'.

Cannot find name 'expect'.

What can I do to fix it?

Solution 1

I hope you've installed -

npm install --save-dev @types/jasmine

Then put following import at the top of the hero.spec.ts file -

import 'jasmine';

It should solve the problem.

Solution 2

With [email protected] or later you can install types with:

npm install -D @types/jasmine

Then import the types automatically using the types option in tsconfig.json:

"types": ["jasmine"],

This solution does not require import {} from 'jasmine'; in each spec file.

Solution 3

npm install @types/jasmine

As mentioned in some comments the "types": ["jasmine"] is not needed anymore, all @types packages are automatically included in compilation (since v2.1 I think).

In my opinion the easiest solution is to exclude the test files in your tsconfig.json like:

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

This works for me.

Further information in the official tsconfig docs.

Solution 4

You need to install typings for jasmine. Assuming you are on a relatively recent version of typescript 2 you should be able to do:

npm install --save-dev @types/jasmine

Solution 5

With [email protected] or later you can install types with npm install

npm install --save-dev @types/jasmine

then import the types automatically using the typeRoots option in tsconfig.json.

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

This solution does not require import {} from 'jasmine'; in each spec file.

View more solutions

Comments

[Lucas Cimon]

You can upvote on Github to fix this bug: github.com/TypeStrong/atom-typescript/issues/1125

[bholben]

Per TypeScript docs for tsconfig.json (v2.1 at this time), its not necessary to add the "types": ["jasmine"] line anymore. "By default all visible “@types” packages are included in your compilation. Packages in node_modules/@types of any enclosing folder are considered visible; specifically, that means packages within ./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/, and so on."

[Jiayi Hu]

@bholben I know, but for some reason node and jasmine types are not detected. At least it doesn't work for me and I'm using [email protected]

[aesede]

If in Windows Powershell you have to do npm install --save-dev "@types/jasmine" (notice the double quotes) or will throw an error

[Sergii]

This solution does not work for me :(, sorry. I used it in ang-app/e2e/tsconfig.json. I tried it in every json level. Could you please add more details?

[Tony O'Hagan]

Depending on the version of Typescript required you may need to install an earlier version. e.g For ionic v2.2.1 that I'm currently using that uses typescript v2.0.9, I needed to install @types/[email protected]. Otherwise you may see these compilation errors.

[Martin Schneider]

just a note: new Angular projects have src/tsconfig.app.json, src/tsconfig.spec.json and tsconfig.json. The mentioned "exclude" section is part of the 1st one. "types": [ "jasmine" ] part of the 2nd.

[FlavorScape]

this is non-standard way of doing this. default tslint rules will prevent reference paths. use the tsconfig file to point to node_modules

[cmolina]

You could just import the module for its side effects: import 'jasmine';

[mleu]

Note that in VS Code you lose the ability to find references in your spec files, as they will not be considered part of the Project.

[TetraDev]

What does import {} from 'jasmine'; actually do? Is it the same as import 'jasmine'?

[Bogdan]

This would not work when using webpack - in this case the actual library needs to be served - the import {} from 'jasmine' pushes the library through

[Dan Kuida]

I actually had similar problem with @types/jest, but it still applies

[Shishir Anshuman]

@mleu I am facing the same problem. How did you fix this issue? Every time while writing the test case, I have to remove the spec files pattern from the exclude block.

[mleu]

@ShishirAnshuman: I did not find a solution and had to live with this limitation until the project ended.

[Shishir Anshuman]

@mleu Oh. No issue. In my project as a workaround, I removed the spec file pattern from the tsconfig's exclude block. Then I created a new tsconfig.build.json file with the spec file pattern added to the exclude block. Now, in my ts-loader options(in the webpack.config) I am using tsconfig.build.json. With these configurations, the modules are being resolved in the test files and while creating the build or starting the server, the test files are excluded.

[Eduardo Cordeiro]

IN ANGULAR 6.0.3: I just imported "import {} from jasmine" and it worked again

[getName]

It doesn't display 'describe, it, expect' in red error color, when 'import {} from 'jest';' but I am not supposed to put this expression, as it means nothing, as it does nothing (and there is no error on the console), but Webstorm continues displaying 'describe, it, expect' in red error color

[Arwin]

Turns out doing this once in one spec file removed 560 errors being shown in Visual Studio 2017 ... so ... thanks? :)

[dave0688]

Unfortunately that doesn't work. It still shows the errors in the spec files

[Christophe Chevalier]

By default all visible “@types” packages are included in your compilation. Packages in node_modules/@types of any enclosing folder are considered visible; specifically, that means packages within ./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/, and so on. See official documentation

[Christophe Chevalier]

Files included using "include" can be filtered using the "exclude" property. However, files included explicitly using the "files" property are always included regardless of "exclude". The "exclude" property defaults to excluding the node_modules, bower_components, jspm_packages and <outDir> directories when not specified. You should add "exclude": ["**/*.spec.ts"] in the tsconfig.app.json file, not in the parent.

[Christophe Chevalier]

You don't need to add "types": ["node"] in tsconfig.json but you should add this type in tsconfig.app.json ! You should don't have this warning again I think. You could keep "target": "es5" or "target": "es6" now.

[Konrad Viltersten]

@aesede What version of PS do you run? I just executed the command without any quotations marks and it went just well.

[aesede]

I dropped using Windows 2 years ago, so I can't say what version it was, but is possible the solution came from an update in npm

[jsaddwater]

This worked for me, but I also had to upgrade my global typescript to 3.5.3 (from 2.5)

[jsaddwater]

@Sergii the tsconfig.json in the src folder

[pritesh agrawal]

This worked for me, I had google map types in the types option. After removing the option completely, it worked fine.

[starcorn]

This solution worked for me. However I had to add it the base tsconfig.json file. My project is created with angular/cli so it comes with few different tsconfig files one which is tsconfig.spec.json which has "types": [ "jasmine" ] already. But seems like it is not read. Instead I had to add that to the base tsconfig file.

[Warren]

Additionally - if there is a tsconfig.json and others that extend from it - tsconfig.spec.json for tests. Then the types: array in the parent will override the types array in the children. So I deleted the types in the parent and set the test types I wanted in the child e.g. types: ["jasmine"]

[Amir Savand]

Yes. I just had to delete the types thing and works! <3

[jlang]

Why would installing and importing an unused function help solving typing issues? I doubt that this is really a valid answer