Angular Type Definitions for Unit Tests Not Recognized by VSCode

Question

Issue

I have an Angular 9 app and just added a small unit test to a component. But VSCode doesn't recognize the types like describe, beforeEach, it. Although I have a tsconfig.spec.json file which has jasmine in its types definition:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jasmine", "node", "jest"]
  },
  "files": ["src/test.ts", "src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

The actual error I get is the following:

Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha`.ts(2582)

What I've tried (but didn't work)

1. Reinstall @types/jasmine via yarn add -D @types/jasmine
2. Add jasmine to types of tsconfig.json
3. Remove the types definitions from tsconfig.spec.json
4. Reinstall all the dependencies of my project
5. Add jasmine to types of the tsconfig.json in the root of my monorepo

Try it yourself

If you want to take a closer look you can try it yourself by

git clone https://github.com/flolu/cents-ideas
git checkout 45bda5235f832ab801d6439d0179dd6c0e76c4cc

Then /services/client/src/app/hello-world/hello-world.component.spec.ts is the file with the errors

Sidenote: The test passes, so it is just a problem with VSCode not finding the types.

Washday

Answer 1

My tsconfig.spec.json was alright. Just had to fix the typeRoots path in my tsconfig.json from

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

to

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

because in my monorepo I only have on node_modules folder in the root of the project.

Washday

Answer 2

Please try importing

  import {} from 'jasmine';

Fadeout

Answer 3

I have the same error. By default the configuration of Angular load the packages @types/***
However, we can configure to load a few package, like "jasmine" for axample.

For that, on file tsconfig.json you must ensure that you add the package dans the parameter "types", or you can delete it and configure "jasmine" or "jest" in tsconfig.spec.json

Extract tsconfig.spec.json :

{
  "extends": "./tsconfig.json",
   "compilerOptions": {
  "outDir": "./out-tsc/spec",
   "types": [
  "jasmine"
   ]
  },

For me, for me, I advise you not to put "types" in tsconfig.json

Subsellium