Issue
This is my tsconfig file
{
"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"
]
}
When I run tsc --noEmit --skipLibCheck
I get this 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.
This is my package.json
{
"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"
}
}
What do I need to do to make TS find the types for @testing-library/jest-dom
?
More details:
This worked with @testing-library/jest-dom v5, but broke when we upgraded to v6
If I remove it from types
in tsconfig I get type errors about missing properties (see comments). I can work around that by including
import '@testing-library/jest-dom'
in one of my test files. But I didn't have to do that before, and I want to understand why I have to now.
Solution
The solution was to change my tsconfig.json from this:
"typeRoots": ["../node_modules/@types", "./node_modules/@types"],
"types": ["jest", "@testing-library/jest-dom"],
to this:
"typeRoots": ["../node_modules/@types", "./node_modules/@types", "../node_modules/@testing-library"],
"types": ["jest", "jest-dom"],
The types for @testing-library/jest-dom
used to be provided by https://www.npmjs.com/package/@types/testing-library__jest-dom but now they're shipped with the main package itself. Because of this it's no longer enough to just look in node_modules/@types
. I now needed to tell TS to also look for types in ../node_modules/@testing-library
, so I added that to typeRoots
. And inside that path, it should look for the types "jest-dom", as specified in types
.
Answered By - Tobbe
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.