React-testing-library: render API returns type any when using TypeScript

[sshanzel]

• @testing-library/dom version: "@testing-library/jest-dom": "4.2.4"
• Testing Framework and version: "jest": "24.9.0"
  
• DOM Environment: "jest-environment-jsdom-fourteen": "1.0.1",
  

Relevant code or config:

My Jest Config (fresh from CRA after ejecting):

"jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.ts"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
  },

What you did:

I was creating simple tests and using the render API - but as I try to navigate the ReturnedResult, the type it returns is any

What happened:

I thought there was something wrong with my configuration - I made a CRA app with --template=typescript flag and it also returns any. But when I try it in a non-typescript app, it returns its actual type

Reproduction:

GitHub repo: https://github.com/sshanzel/dom-testing-library-render-api-issue
Fresh from CRA - using TypeScript template and ejected.

Problem description:

I am quite new with testing frameworks, and I was trying to wander through the library's available APIs, the render API is returning type any though after navigating the actual API from node_modules - it should have been returning the type ReturnedResult which it does not. But I tried it on non-typescript projects - it displays its actual type.

Suggested solution:

I am not really sure if this has to do with my VS Code but I tried it in a different project (as mentioned above) and it is working as intended.

[eps1lon]

Can confirm with a minimal repro.

[sshanzel]

Thanks for the confirmation - sorry though I thought I was at dom-testing-library repo already. Should we be recreating the issue? I can't seem to see the reference transferring of the item.

[eps1lon]

Should we be recreating the issue? I can't seem to see the reference transferring of the item.

I already transferred the issue.

[sshanzel]

Thank you! And for keeping this wonderful library as well!

[horakjakub]

Hi, I'm looking for the first place when I can contribute that's why I investigated that briefly.

FWIU reason for this bug is that CRA is currently using "@testing-library/react": "^9.3.2" which still has a depedeny on "@types/testing-library__dom": "*" which was already removed due to moving types from @types repo to testing-library/dom-testing-library directlly (which has been preformed in 7.5.0. That is why testing-library/react cannot import queries type.

Solutions which should works for that I think are:

• bump dependency "@testing-library/react" in CRA to at least [11.1.0] (https://github.com/testing-library/react-testing-library/commit/7b7460a61a0067f190947216c496ab7b5e30301f#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519) where correct types should be included,
• bring back support for "@types/testing-library__dom".

Not sure what is easier and more compatible with the current testing-library development direction, so just left comment here and I hope it will be helpful.

[eps1lon]

FWIU reason for this bug is that CRA is currently using

As showed in https://github.com/testing-library/react-testing-library/issues/801#issuecomment-708943858 the bug is independent of CRA and happens with latest versions. We almost never backport fixes and I don't think we want to spend time on a type-only issues. So let's fix it for the latest version first.

For anyone working on I'd recommend to start with

import {render} from '@testing-library/react'
import * as React from 'react';

function App() {
    return null;
}

const {getByText} = render(<App />)

and enable type-checking for libraries i.e. skiLibCheck: false. The any is likely caused by some type-error in the libraries.

[horakjakub]

Thx for feedback. I tried to reproduce that in on my local new project with minimal setup (as described above), and everything works as expected.

[kentcdodds]

Awesome. Thanks everyone :)