The inferred type of 'renderWithTheme' cannot be named without a reference to @types/testing-library__dom/queries'. This is likely not portable. A type annotation is necessary.

[RIP21]

• @testing-library/react version: 9.4.0
• react version: 16.12.0
• node version: 12.14.1
• pnpm version: 4.9.3
• yarn version: 1.21.1

Relevant code or config:

import { render } from '@testing-library/react'
import { withTheme } from './withTheme'

export const renderWithTheme = (component: React.ReactElement) =>
  render(withTheme(component)) // No matter withTheme or just render, same error

What you did:

What happened:

Reproduction:

1. Install Typescript
2. Install @testing-library/react
3. Add any function that takes component and returns render(component)
4. Run tsc with following config

{
  "compilerOptions": {
    "baseUrl": "src",
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "declarationDir": "./types",
    "declarationMap": true,
    "downlevelIteration": true,
    "emitDeclarationOnly": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
    "lib": ["dom", "es2018"],
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext"
  },
  "include": ["src"],
  "exclude": [
    "./src/**/__tests__/**/*.ts",
    "./src/**/__tests__/**/*.tsx",
    "./src/**/*.test.tsx",
    "./src/**/*.test.ts"
  ]
}

Problem description:

I tried yarn as well as the pnpm, the result is the same all the time.
Cannot compile declarations with this error:

The inferred type of 'renderWithTheme' cannot be named without a reference to '../../../../common/temp/node_modules/.pnpm/registry.npmjs.org/@types/testing-library__react/9.1.2/node_modules/@types/testing-library__dom/queries'. This is likely not portable. A type annotation is necessary.

Suggested solution:

I have no idea.

[RIP21]

All typings are the freshest one (dom, react, react-hooks) explicitly installed in package.json due to pnpm strict nature that doesn't see any typings/modules included in the dependencies of the dependent packages so I had to that. With yarn tho, and no explicit typings in package.json result is pretty much the same.
typescript is of 3.7.5 version.

[RIP21]

The solution was to set preventSymlinks to true in tsconfig. I spent 3 days on that. Dayum :(

[CodingDive]

@RIP21 do you mean the compiler option preserveSymlinks? Also didn't fix the error for me.

[RIP21]

@CodingDive yes. It's not guaranteed to fix the issue surely, but sometimes it indeed fixes it. Another way to try to fix it is described here
microsoft/TypeScript#36800
So import such as import * as ___ from @types/testing-library__dom/queries and ignore it as it will be unused, can fix it. Or without queries or just the library itself. It's super tricky and rather try and trial but sometimes the hack mentioned above works.

[RIP21]

Regarding preventSymlinks it's better to keep it false and enable it only for declaration generation. Regular compilation without any emit should be done with preventSymlinks: false to prevent typings from being missing as preventSymlinks kinda affects it this way somehow (nature of that I cannot explain), especially in pnpm managed repos.

[tu4mo]

I had both @testing-library/dom and @testing-library/react as deps. @testing-library/react already has @testing-library/dom as dependency and it was a different version. Removing @testing-library/dom fixed the issue.

[Kishokanth-netizen]

is the file called renderWithTheme? this is what fixed this issue for me when creating a custom renderer for RTL

[solyane2002]

If someone still has the issue, I fixed it by adding the returned type as follow:

 ReturnType<typeof render>

[hugotox]

If someone still has the issue, I fixed it by adding the returned type as follow:

 ReturnType<typeof render>

Hi @solyane2002

Where did you add that?

[solyane2002]

Hi,

as follow:

const AllTheProviders = ({ children }: { children: React.ReactNode }) => {
  return (
    <ThemeProviderWrapper mode='light'>
      {children}
    </ThemeProviderWrapper>
  );
};

const customRender = (
  ui: ReactElement,
  options?: Omit<RenderOptions, 'wrapper'>,
): ReturnType<typeof render> => render(ui, { wrapper: AllTheProviders, ...options });

export * from '@testing-library/react';
export { customRender as render };