Could not find a declaration file for module '@testing-library/jasmine-dom/dist' on Angular 12 project

[marcioggs]

• jasmine-dom version: 1.0.3
• node version: 14.15.4
• npm version: 6.14.10
• @angular/core version: 12.2.9
• typescript version: 4.3.2
• jasmine-core version: 3.8.0

Relevant code or config:

tsconfig.spec.json:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jasmine", "@testing-library/jasmine-dom"]
  },
  "files": ["src/test.ts", "src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

test.ts:

// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';

import JasmineDOM from '@testing-library/jasmine-dom/dist';

declare const require: {
  context(
    path: string,
    deep?: boolean,
    filter?: RegExp
  ): {
    keys(): string[];
    <T>(id: string): T;
  };
};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

beforeAll(() => {
  // On the Jasmine version I'm using the addMatches method is directly on the jasmine variable instead of having to call .getEnv()
  jasmine.addMatchers(JasmineDOM);
});

What you did:

Tried to run the tests:

npm run-script test

After the error happened, installed the types package as suggested in the error message, but the same error occurred:

npm run-script testnpm i --save-dev @types/testing-library__jasmine-dom

What happened:

Error: src/test.ts:10:24 - error TS7016: Could not find a declaration file for module '@testing-library/jasmine-dom/dist'. 'C:/some-path/angular/node_modules/@testing-library
/jasmine-dom/dist/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/testing-library__jasmine-dom` if it exists or add a new declaration (.d.ts) file containing `declare module '@testing-library/jasmine-dom/dist';`

10 import JasmineDOM from '@testing-library/jasmine-dom/dist';

Problem description:

I couldn't make it work on an Angular 12 project by following the TypeScript instructions on the README file.
Please note that on tests.ts I had to call jasmine.addMatchers(JasmineDOM); without .getEnv() as it was suggested in the README. Anyway the error happens before this line.

I also took a look at this other related issue, but couldn't find anything that could solve this.

Is there any additional configuration I need to make this work?
Thanks in advance for the support and for providing this helpful library!

[marcioggs]

It works fine if @ts-ignore is added.

// @ts-ignore
import JasmineDOM from '@testing-library/jasmine-dom/dist';

Not sure if it can be related to the library being @testing-library/jasmine-dom/dist having a /dist in the end, and the associated @types package not having it (@types/testing-library__jasmine-dom).

[brrianalexis]

Hi Márcio! Thanks for checking out the library!

To be honest it's been a while since I used the library, since I developed it for an old job that I had and never used it with typescript.

 Not sure if it can be related to the library being @testing-library/jasmine-dom/dist having a /dist in the end, and the associated @types package not having it (@types/testing-library__jasmine-dom).

I don't really know much about how typescript declaration files work but if you're willing and able to come up with a solution for this, a PR would be more than welcome!

I'm really sorry I can't help you with this 🙁

[timdeschryver]

Hi, I'm the maintainer of the Angular Testing Library.
I've included a karma example that can be found at https://github.com/testing-library/angular-testing-library/blob/main/apps/example-app-karma/src/test.ts

[marcioggs]

Hi, I'm the maintainer of the Angular Testing Library. I've included a karma example that can be found at https://github.com/testing-library/angular-testing-library/blob/main/apps/example-app-karma/src/test.ts

I tried with the same tests.ts as on this sample and got this error:

TypeError: expect(...).toHaveTextContent is not a function

Don't you have to add the matchers, as stated on the instructions below?
https://github.com/testing-library/jasmine-dom#with-typescript

import JasmineDOM from '@testing-library/jasmine-dom/dist';

beforeAll(() => {
	jasmine.getEnv().addMatchers(JasmineDOM);
});

I still couldn't make this work without adding // @ts-ignore to the import statement.
Thanks.

[timdeschryver]

@marcioggs somehow I'm not required to do that 🤔
Did you verify we're using the same versions?
If you can reproduce it in a project, we could take a look at it.

[marcioggs]

We're using the same versions.

From my package.json:

"@testing-library/angular": "^10.11.1",
"@testing-library/dom": "^8.11.1",
"@testing-library/jasmine-dom": "^1.2.0",
"@types/jasmine": "~3.10.2",
"jasmine-core": "~3.10.1",
"karma": "^6.3.9",
"karma-chrome-launcher": "~3.1.0",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "~1.7.0",

Thanks for the support, @timdeschryver .
I'll check for clues on the rest of your project files and will let you know if I find something.

[xugetsu]

I have the same issue. Any updates on this? @marcioggs did you find a fix?

[xugetsu]

Ok, to fix this I had to import jasmine-dom twice like the following and it fixed my error in the terminal and the Eslint error:

import "zone.js/dist/long-stack-trace-zone";
import "zone.js/dist/proxy.js";
import "zone.js/dist/sync-test";
import "zone.js/dist/jasmine-patch";
import "zone.js/dist/async-test";
import "zone.js/dist/fake-async-test";
import { getTestBed } from "@angular/core/testing";
import {
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting,
} from "@angular/platform-browser-dynamic/testing";

import "@testing-library/jasmine-dom"; // <---- Fixed the lint error: Property 'toBeInTheDocument' does not exist on type 'Matchers<HTMLElement>'.
import JasmineDOM from "@testing-library/jasmine-dom/dist"; // <---- fixed the terminal error: "TypeError: expect(...).toBeInTheDocument is not a function"

declare const require: {
    context(
        path: string,
        deep?: boolean,
        filter?: RegExp
    ): {
        <T>(id: string): T;
        keys(): string[];
    };
};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
// Then we find all the tests.
const context = require.context("./", true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

beforeAll(() => {
    // On the Jasmine version I'm using the addMatches method is directly on the jasmine variable instead of having to call .getEnv()
    jasmine.addMatchers(JasmineDOM);
});

[marcioggs]

I have the same issue. Any updates on this? @marcioggs did you find a fix?

No, I still have the workaround described in the first comment.

[sdarnell]

For me (Angular 15, typescript 4.8.4) I needed to import the types explicitly in my tsconfig.spec.json:

    "types": [
      "jasmine",
      "node",
      // "@testing-library/jasmine-dom",
      "@types/testing-library__jasmine-dom"
    ]

[sdarnell]

Ah, but then later I'd enabled noImplicitAny in my tsconfig and things stopped working.
My current solution for that is to have "noImplicitAny": true in the main app tsconfig, and override it to false in tsconfig.spec.json.

[oriSomething]

@sdarnell I use at work these types with strict at work and they work fine. I don't use Angular, can't check for the issue

[JJosephttg]

For me (Angular 15, typescript 4.8.4) I needed to import the types explicitly in my tsconfig.spec.json:

    "types": [
      "jasmine",
      "node",
      // "@testing-library/jasmine-dom",
      "@types/testing-library__jasmine-dom"
    ]

To add on to this, installing the types helped and then doing a tsignore on the import in test.ts part with the extending of the matchers did it for me. Doesn't look like jasmine dom ships with types

[th3n3rd]

For me, freshly new created Angular 16.2.x with Typescript 5.1.x, this is what worked:

• Install the dev dependency

npm install --save-dev @testing-library/jasmine-dom

• Install the types as well (step missing in README), or typescript will complain later

npm install --save-dev @types/testing-library__jasmine-dom

• Create a src/test.ts file in order to load the matchers (slightly different code than the one in the README), typically this file would have been generated by Angular (in the previous versions) and we would just modify the content, but this is not the case anymore

// @ts-ignore
import JasmineDOM from '@testing-library/jasmine-dom';

beforeAll(() => {
  jasmine.addMatchers(JasmineDOM);
});

• Update the tsconfig.spec.json in order to load the types and the test.ts file

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jasmine",
      "node",
      // include the types
      "@testing-library/jasmine-dom"
    ]
  },
  // include the test entry point
  "files": ["src/test.ts"],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

• update the angular.json file overriding the include parameters, since the test.ts is not generated anymore by Angular it won't be automatically included. Additionally because we are overriding the include option we also need to explicitly provide the spec or other test files.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "your-project-name": {
      // other stuff
      "architect": {
        // other stuff
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            // override the include by specifying the test.ts and all other needed files
            "include": [
              "src/test.ts",
              "src/**/*.spec.ts",
              "src/**/*.d.ts"
            ],
            // other stuff
          }
        }
      }
    }
  }
}

Hope this helps.