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

marcioggs · 2021-10-20T08:29:56Z

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!

The text was updated successfully, but these errors were encountered:

marcioggs · 2021-10-20T11:48:00Z

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 · 2021-10-25T18:41:43Z

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 · 2021-12-09T14:55:03Z

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 · 2022-01-03T16:40:58Z

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 · 2022-01-03T17:32:47Z

@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 · 2022-01-04T07:53:17Z

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 · 2022-01-31T13:13:59Z

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

xugetsu · 2022-01-31T13:23:43Z

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 · 2022-01-31T14:33:04Z

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 · 2023-03-24T15:33:22Z

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 · 2023-04-08T16:15:55Z

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 · 2023-04-12T08:55:44Z

@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 · 2023-05-14T10:47:10Z

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 · 2023-10-25T06:47:40Z

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.

sebastian-altamirano · 2024-12-02T00:46:29Z

This issue should be fixed when using @types/testing-library__jasmine-dom >= 1.3.4

brrianalexis added the help wanted Extra attention is needed label Oct 25, 2021

sebastian-altamirano mentioned this issue Nov 30, 2024

[testing-library/jasmine-dom] Add default export DefinitelyTyped/DefinitelyTyped#71300

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

marcioggs commented Oct 20, 2021 •

edited

Loading

marcioggs commented Oct 20, 2021 •

edited

Loading

brrianalexis commented Oct 25, 2021

timdeschryver commented Dec 9, 2021

marcioggs commented Jan 3, 2022 •

edited

Loading

timdeschryver commented Jan 3, 2022

marcioggs commented Jan 4, 2022

xugetsu commented Jan 31, 2022

xugetsu commented Jan 31, 2022

marcioggs commented Jan 31, 2022

sdarnell commented Mar 24, 2023

sdarnell commented Apr 8, 2023

oriSomething commented Apr 12, 2023

JJosephttg commented May 14, 2023

th3n3rd commented Oct 25, 2023

sebastian-altamirano commented Dec 2, 2024

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

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

Comments

marcioggs commented Oct 20, 2021 • edited Loading

Relevant code or config:

What you did:

What happened:

Problem description:

marcioggs commented Oct 20, 2021 • edited Loading

brrianalexis commented Oct 25, 2021

timdeschryver commented Dec 9, 2021

marcioggs commented Jan 3, 2022 • edited Loading

timdeschryver commented Jan 3, 2022

marcioggs commented Jan 4, 2022

xugetsu commented Jan 31, 2022

xugetsu commented Jan 31, 2022

marcioggs commented Jan 31, 2022

sdarnell commented Mar 24, 2023

sdarnell commented Apr 8, 2023

oriSomething commented Apr 12, 2023

JJosephttg commented May 14, 2023

th3n3rd commented Oct 25, 2023

sebastian-altamirano commented Dec 2, 2024

marcioggs commented Oct 20, 2021 •

edited

Loading

marcioggs commented Oct 20, 2021 •

edited

Loading

marcioggs commented Jan 3, 2022 •

edited

Loading