Definitelytyped: testing-library-react: incorrect typescript error thrown for render result

[Ardeshir81]

• [x] I tried using the @types/testing-library__react package and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript (3.7.3)
• [?] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there). (this is not a question, its a bug report)
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors:
    
    @alexkrolick
    
    @kentcdodds
    
    @eps1lon
    
    @weyert
    
    @ifiokjr
    
    @danieljcafonso
  
  

const { queryByTestId } = render(
    <MyComponent />
  );

throws me a typescript error in my IDE:

Property 'queryByTestId' does not exist on type 'RenderResult

but the function actually exists and is usable and everything in console is fine!

I have no typescript problems with other queries (queryByRole, etc...)

[danieljcafonso]

Hello @Ardeshir81 😄
What IDE are you using? I'm unable to reproduce that issue on VSCode 😕

[Ardeshir81]

HI!
I'm using VSCode 1.41.0

This is my exact code:

import { render, fireEvent, wait } from '@testing-library/react';
// ...
test('renders with no problem', () => {
  // ...
  const { queryByTestId } = render(
    <InterfaceIPConfig
      formState={Test.getFakeFormInputs()}
      setFormState={Test.SetFakeFormState}
    />
  );
  // ...
})

and this is my error:

this is my package.json:

{
  "devDependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@types/jest": "^24.0.23",
    "@types/node": "^12.12.14",
    "@types/react": "^16.9.15",
    "@types/react-dom": "^16.9.4",
    "@types/react-router-dom": "^5.1.3",
    "concurrently": "^5.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "husky": "^3.1.0",
    "prettier": "1.19.1",
    "pretty-quick": "^2.0.1",
    "react-app-rewired": "^2.1.5",
    "scp": "0.0.3",
    "typescript": "^3.7.3"
  },
}

and this is parts of my package-lock.json:

{
  "@types/testing-library__dom": {
      "version": "6.10.0",
      "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.10.0.tgz",
      "integrity": "sha512-mL/GMlyQxiZplbUuFNwA0vAI3k3uJNSf6slr5AVve9TXmfLfyefNT0uHHnxwdYuPMxYD5gI/+dgAvc/5opW9JQ==",
      "dev": true,
      "requires": {
        "pretty-format": "^24.3.0"
      }
    },
    "@types/testing-library__react": {
      "version": "9.1.2",
      "resolved": "https://registry.npmjs.org/@types/testing-library__react/-/testing-library__react-9.1.2.tgz",
      "integrity": "sha512-CYaMqrswQ+cJACy268jsLAw355DZtPZGt3Jwmmotlcu8O/tkoXBI6AeZ84oZBJsIsesozPKzWzmv/0TIU+1E9Q==",
      "dev": true,
      "requires": {
        "@types/react-dom": "*",
        "@types/testing-library__dom": "*"
      }
    },
}

Thanks @danieljcafonso for devoting time on this

[danieljcafonso]

Hi again @Ardeshir81
Once again, I've tried to reproduce the issue with the same conditions you have and failed to reproduce it.
Not sure this may help, but there is a minor update on the @types/testing-library__dom. Try to update your dependencies and check if the issue persists.

[Ardeshir81]

YEP!

That solved the issue

THANKS!

[Ardeshir81]

btw, I had to explicitly install @types/testing-library__dom, it wasn't already in my package.json, but now it is! I'm not sure if that is a problem with me being unable to use npm to update it , or with other packages that depend on it that they forgot to update the dependency.

[eps1lon]

That solved the issue

@Ardeshir81 Would you be so kind and close the issue if this is solved for yoU?