Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"types": ["jest", "@testing-library/jest-dom"] not working after v6 upgrade #559

Closed
Tobbe opened this issue Dec 14, 2023 · 3 comments
Closed

Comments

@Tobbe
Copy link

Tobbe commented Dec 14, 2023

  • @testing-library/jest-dom version: 6.1.5
  • node version: 18.19.0
  • jest (or vitest) version: jest 29.7.0
  • npm (or yarn) version: yarn 3.7.0

Relevant code or config:

part of tsconfig

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

And package.json

  "devDependencies": {
    "@testing-library/jest-dom": "^6.1.5",
  }

Also tried with adding "@types/jest": "^29.5.11", but no difference

What you did:

We upgraded from v5.17.0 to v6.1.5

What happened:

Get the following error

❯ yarn tsc --noEmit --skipLibCheck
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.

Reproduction:

npx -y create-redwood-app@canary -y ~/tmp/rw-jest-dom
cd web
yarn tsc --noEmit --skipLibCheck

Problem description:

Or CI is failing, blocking more PRs getting merged.

Suggested solution:

Not a solution really, but more of a workaround.

Update tsconfig to remove "@testing-library/jest-dom"

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

Now I get

❯ yarn tsc --noEmit --skipLibCheck
src/lib/formatters.test.tsx:175:42 - error TS2339: Property 'toBeChecked' does not exist on type 'JestMatchers<any>'.

175     expect(screen.getByRole('checkbox')).toBeChecked()
                                             ~~~~~~~~~~~

But if I now go into the test file and add

import '@testing-library/jest-dom'

Then all works.
But we didn't have to do that before, so why do we need to now?

jtoar added a commit to redwoodjs/redwood that referenced this issue Dec 15, 2023
This reverts #9673 and
#9711.

With v6 of `@testing-library/jest-dom`, `yarn rw type-check` fails in
Redwood projects because it can't locate the types for
`@testing-libary/jest-dom`. They absorbed the definitely types package
(`@types/testing-library__jest-dom`) in this PR:
testing-library/jest-dom#511. Here's an example
of a failing run:
https://github.com/redwoodjs/redwood/actions/runs/7213177056/job/19668365614?pr=9708.

The logical thing to do is remove `@testing-libary/jest-dom` from the
`types` array in `web/tsconfig.json`, but when we do that we get a
different failure from TS saying that it doesn't understand the extended
matchers provided by `testing-library/jest-dom` like
`toBeInTheDocument`.

@Tobbe filed an issue in their repo here
testing-library/jest-dom#559.

In the PR I linked to, the maintainer notes that...

> But in my local testing with the changes in this PR, following the
Readme was sufficient to get full auto-complete support even for JS-only
users. As long as they have a jest-setup file that imports the bare
export and add a dependency on @types/jest, recent versions of VS Code
will figure it out.

Users don't have jest setup files in their project (we just point to a
jest preset) or `@types/jest` as an explicit dev dependency.

I took a look at it but couldn't crack it today. Instead of holding up
other PRs in CI, better to revert it for now and come back to later when
we have more leads.
@Tobbe
Copy link
Author

Tobbe commented Dec 15, 2023

Specifying a full path to @testling-library/jest-dom works. But obviously doesn't scale very well 😀
image

image

@Tobbe
Copy link
Author

Tobbe commented Dec 15, 2023

Figured out how to configure it!

image

and as text for easier searching

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

Because @testling-library/jest-dom no longer uses a DefinitlyTyped type definition for its types it's not enough anymore to just look inside ../node_modules/@types, we now also have to look inside ../node_modules/@testing-library. And because we're telling TS to look inside the @testing-library/ directory, the type name should only be jest-dom.

I'm not sure if this should be classified as a regression. Or if some docs should be updated.
I'm happy with this solution, and for me this issue can be closed.
But I'll leave it open incase the maintainers of this library wants it open for tracking purposes. If not – feel free to close it! 🙂

@zak905
Copy link

zak905 commented Dec 25, 2023

@Tobbe's answer was helpful. Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants