What steps should I take to set up TS in order to locate the types related to @testing-library/jest-dom

Here is my customized tsconfig settings

{
  "compilerOptions": {
    "noEmit": true,
    "allowJs": true,
    "esModuleInterop": true,
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "baseUrl": "./",
    "skipLibCheck": false,
    "rootDirs": [
      "./src",
      "../.redwood/types/mirror/web/src",
      "../api/src",
      "../.redwood/types/mirror/api/src"
    ],
    "paths": {
      "src/*": [
        "./src/*",
        "../.redwood/types/mirror/web/src/*",
        "../api/src/*",
        "../.redwood/types/mirror/api/src/*"
      ],
      "$api/*": [ "../api/*" ],
      "types/*": ["./types/*", "../types/*"],
      "@redwoodjs/testing": ["../node_modules/@redwoodjs/testing/web"]
    },
    "typeRoots": ["../node_modules/@types", "./node_modules/@types"],
    "types": ["jest", "@testing-library/jest-dom"],
    "jsx": "preserve"
  },
  "include": [
    "src",
    "../.redwood/types/includes/all-*",
    "../.redwood/types/includes/web-*",
    "../types",
    "./types"
  ]
}

Upon running tsc --noEmit --skipLibCheck, I encounter the following error

error TS2688: Cannot find type definition file for '@testing-library/jest-dom'.
  The file is in the program because:
    Entry point of type library '@testing-library/jest-dom' specified in compilerOptions

  tsconfig.json:29:23
    29     "types": ["jest", "@testing-library/jest-dom"],
                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    File is entry point of type library specified here.


Found 1 error.

Here is how my package.json looks like

{
  "name": "web",
  "version": "0.0.0",
  "private": true,
  "browserslist": {
    "development": [
      "last 1 version"
    ],
    "production": [
      "defaults"
    ]
  },
  "dependencies": {
    "@redwoodjs/auth-dbauth-web": "7.0.0-canary.711",
    "@redwoodjs/forms": "7.0.0-canary.711",
    "@redwoodjs/router"": "7.0.0-canary.711",
    ""@redwoodjs/web": "7.0.0-canary.711",
    "humanize-string": "2.1.0",
    "react": "0.0.0-experimental-e5205658f-20230913",
    "react-dom": "0.0.0-experimental-e5205658f-20230913"
  },
  "devDependencies": {
    "@redwoodjs/vite": "7.0.0-canary.711",
    "@testing-library/jest-dom": "^6.1.5",
    "@types/react": "18.2.37",
    "@types/react-dom": "18.2.15",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.32",
    "postcss-loader": "^7.3.3",
    "prettier-plugin-tailwindcss": "0.4.1",
    "tailwindcss": "^3.3.6"
  }
}

In order to resolve the issue of finding types for @testing-library/jest-dom, further investigation and adjustment of dependencies might be required.

Additional information:

The configuration was functional with @testing-library/jest-dom v5, but started failing after upgrading to v6.

If removing it from types in tsconfig results in type errors regarding missing properties, one workaround could be adding 

import '@testing-library/jest-dom'
in a test file. However, understanding why this change is necessary would be beneficial.

typescriptjestjsreact-testing-librarytsconfig

Answer №1

To resolve the issue, I made a modification to my tsconfig.json as follows:

    "typeRoots": ["../node_modules/@types", "./node_modules/@types", "../node_modules/@testing-library"],
    "types": ["jest", "jest-dom"],

In the past, the types for @testing-library/jest-dom were sourced from https://www.npmjs.com/package/@types/testing-library__jest-dom. However, they are now included in the main package itself. Consequently, simply searching within node_modules/@types is no longer sufficient. Therefore, I directed TypeScript to additionally explore types within ../node_modules/@testing-library by adding it to typeRoots. Within that directory, it should identify the types specified as "jest-dom" in types.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing top level await feature in Angular 16

Issue with ./node_modules/lucid-cardano/esm/src/core/core.js - Error: Module parse failed due to the top-level-await experiment not being enabled (experiments.topLevelAwait must be set to true to enable it). The file was processed using these loaders: ./n ...

angulartypescriptwebpack

How can one generate a mapped, conditional type in TypeScript that eliminates properties of type string | null?

Here's my latest unsuccessful attempt before seeking guidance. Can anyone point out my mistakes? Thank you! interface Entity { id: string; title: string | null; } interface AnotherEntity { id: string; title: string; } type ExcludeNullFields& ...

typescriptmapped-typesconditional-types

Error TS2322: The specified type Login cannot be assigned to the given type

I've been facing an issue while working on my app in react native. The error message I keep encountering is as follows: TS2322: Type 'typeof Login' is not assignable to type ScreenComponentType<ParamListBase, "Login"> | undefined Type ...

typescriptreact-native

Identifying memory leaks caused by rxjs in Angular applications

Is there a specific tool or technique available to identify observables and subscriptions that have been left behind or are still active? I recently encountered a significant memory leak caused by components not being unsubscribed properly. I came across ...

javascriptangulartypescriptrxjsrxjs6

What limitations do we face when trying to change the objects received by a component through @input() in Angular?

Recently, I made the leap from angular 7 to angular 11 in my app. Everything was running smoothly until I decided to incorporate angular universal for server-side rendering. Shortly after implementing server-side rendering, a flurry of errors cropped up, ...

angulartypescriptangular-universal

Struggling to compile Typescript with mocha using the Visual Studio Code Debugger

I'm currently troubleshooting unit testing using Visual Studio Code and mocha, but I encounter an error when mocha is launched. TSError: ⨯ Unable to compile TypeScript: mfa/test/index.test.ts(4,20): error TS2307: Cannot find module 'assert&ap ...

typescriptvisual-studio-codemocha.js

Angular: Issue encountered while attempting to differentiate an '[object Object]'. Arrays and iterables are the only permissible types for this operation

I encountered the following error message while attempting to retrieve updated data: Error trying to diff '[object Object]'. Only arrays and iterables are allowed Snippet of Get Code: allDatas allData(data) { this.allDatas = data } Up ...

javascriptangulartypescript

The issue with React Testing using Jest: The domain option is necessary

I've recently developed a React app that implements Auth0 for Authentication. Right now, I'm working on setting up a test suite using Jest to test a specific function within a component. The function I want to test is createProject() in a React ...

javascriptreactjsunit-testingjestjsauth0

Managing the ERR_NAME_NOT_RESOLVED issue

Currently, I am facing a task related to the health check endpoint where I need to receive a response from the backend or encounter a net::ERR_NAME_NOT_RESOLVED error if we are outside of a specific network. When attempting to send a request to my endpoin ...

javascriptangulartypescript

Issues encountered when trying to manipulate the Angular dom

Currently, I have an array of check boxes set up in the following manner: <div *ngFor="let order of orders; let i = index"> <input type="checkbox" id="{{orders[i].name}}_i">{{orders[i].name}} </div> Let's say the check boxes ...

javascriptangulartypescriptdom

Counting nodes that have the 'enabled' property: A guide

I am dealing with a tree structure that has Node objects: class Node implements ITreeNode { id?: any; name: string; children:? Node[], enabledState = new Subject<boolean>(); toggle() { this.enabled = !this.enabled; this.enabledStat ...

angulartypescript

Typescript: The dilemma of losing the reference to 'this'

My objective is to set a value for myImage, but the js target file does not contain myImage which leads to an error. How can I maintain the scope of this within typescript classes? I want to load an image with the Jimp library and then have a reference to ...

node.jstypescript

Tips for effectively handling notifications using a single state management system

This React project showcases the Notification System demo provided by Mantine. It includes several function components utilizing notification. const A = () => { useEffect(() => { notifications.show({ // config }); }, []); retur ...

reactjstypescriptmantine

Failed to access element from the array using specified id

Seeking assistance with creating dynamic pages for each object in the boxArray file. I've developed a service called boxService to extract objects. While I am able to retrieve all elements successfully, encountering errors when attempting to extract i ...

arraysangulartypescript

Angular5/Karma is raising the error message "selector is not a recognized element"

I am encountering a small issue with my component. While everything seems to be working fine in my browser without any errors, the Karma debugger is throwing some errors that I would like to resolve for clarity. Error: Failed: Template parse errors: &apo ...

angulartypescriptkarma-runnerkarma-jasmine

The RxJS Observable using Subject, timer polling, and combineLatest fails to trigger

I developed a function to conduct polling on an API while incorporating pagination. For this purpose, I utilized a Subject Observable for pagination and implemented polling using the timer method (I attempted interval as well with similar outcomes). Below ...

angulartypescriptrxjspollingrxjs5

React waitforelement fails to work in conjunction with asynchronous calls

I am currently experimenting with a straightforward login form that includes an asynchronous call in React using TypeScript and classes. Here is how my component appears: import * as React from 'react'; import { LoginService } from './servic ...

reactjstypescriptjestjs

When accessing an Angular 7 page directly through the URL in the browser, it becomes unresponsive. However, the page works perfectly fine when navigating

I've been tackling a poorly developed Angular 7 legacy application and encountering a bizarre issue. There's a component that requires a parameter for email verification, but when the URL is visited directly, it doesn't function as expected. ...

angulartypescriptangular-routing

What is the best way to refresh the data in my list when a subitem is updated through a GET request using RTK Query?

Having a good understanding of the RTK query concept, I am facing a specific use case where I require some guidance. In my application, there is a list component and a details component that allows users to navigate and view more information about a parti ...

reactjstypescriptreduxreact-reduxrtk-query

What is the best way to retrieve children generated by a custom HTML component using idiomatic React methods?

I'm currently working on developing a search bar with predictive text input using a custom HTML component. The component generates multiple plain HTML children that I need to manipulate in order to achieve the desired functionality. Specifically, I ha ...

htmlreactjstypescript