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.

Sign up for GitHub

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

Jump to bottom

Property 'toHaveTextContent' does not exist on type 'Assertion<HTMLElement>'. #620

Open
drichar opened this issue Aug 2, 2024 · 3 comments · May be fixed by #621
Open

Property 'toHaveTextContent' does not exist on type 'Assertion<HTMLElement>'. #620

drichar opened this issue Aug 2, 2024 · 3 comments · May be fixed by #621

Comments

@drichar
Copy link

drichar commented Aug 2, 2024 •
edited
Loading

  • @testing-library/jest-dom version: 6.4.8
  • node version: 20.14.0
  • vitest version: 2.0.4
  • pnpm version: 9.4.0
  • @testing-library/react version: 16.0.0

Relevant code or config:

describe('ellipseAddressJsx', () => {
  it('should return ellipsed address with specified width', () => {
    const address = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
    const width = 4

    const { container } = render(ellipseAddressJsx(address, width))

    expect(container).toHaveTextContent('aaaa…aaaa')
  })
})

What you did:

Upgraded from vitest 2.0.3 from 2.0.4

What happened:

After upgrading to [email protected] this TypeScript error appeared in every @testing-library/jest-dom assertion:
image

Reproduction:

https://codesandbox.io/p/devbox/silly-panna-vx86jv

See src/utils.test.tsx

Problem description:

Following the instructions for using @testing-library/jest-dom with Vitest provided here no longer seems to work in the latest version of Vitest. (Confirmed this is also the case for [email protected])

Suggested solution:

As suggested here: #546 (comment)

In tsconfig.json:

{
  "compilerOptions": {
    "types": ["@testing-library/jest-dom"]
  },
}

This resolves the issue.
@gnapse gnapse linked a pull request Aug 2, 2024 that will close this issue
Open
2 tasks
@gnapse
Copy link
Member

gnapse commented Aug 2, 2024 •
edited
Loading

Does #621 fix the problem? If I understand correctly, this is something that consumers of the library would need to do in their own repos, so all we can do is document this in the README, right?

@andykenward
Copy link

Instead of changing your "types", add your vitest.setup.ts file to the "include" array in your tsconfig.json.

tsconfig.json

{
  ...
  "include": ["src", "vitest.setup.ts"],
}

See With TypeScript in the jest-dom README.md, which uses "./jest-setup.ts" in the example.

With TypeScript

If you're using TypeScript, make sure your setup file is a .ts and not a .js
to include the necessary types.

You will also need to include your setup file in your tsconfig.json if you
haven't already:

  // In tsconfig.json
  "include": [
    ...
    "./jest-setup.ts"
  ],

@gnapse
Copy link
Member

gnapse commented Aug 5, 2024

Can you make a review of that PR and request/suggest changes?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

docs: Update tsconfig setup instructions in the README testing-library/jest-dom
3 participants
@gnapse @drichar @andykenward