Search code examples
reactjstypescripttypescript-typingsreact-tsx

TestUtils findRenderedComponentWithType fails to compile when Component<Props> defined


File package.json:

{
  "scripts": {
    "test": "tsc --project . --noEmit"
  },
  "dependencies": {
    "@types/react": "^16.7.6",
    "@types/react-dom": "^16.0.9",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "typescript": "^3.1.6"
  }
}

File tsconfig.json:

{
  "compilerOptions": {
    "lib": ["es2015", "dom"],
    "target": "es2015",
    "moduleResolution": "node",
    "jsx": "react",
    "strict": true
  }
}

File test.tsx:

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import * as TestUtils from 'react-dom/test-utils'

interface Props {
  a: number
}

class Component extends React.Component<Props> {
  render () {
    return 'test'
  }
}

const div = TestUtils.renderIntoDocument(
  <div>
    <Component a={1} />
  </div>
) as React.Component

const component = TestUtils.findRenderedComponentWithType(div, Component)

Running tsc --project . --noEmit results with the following error:

src/test.tsx:22:64 - error TS2345: Argument of type 'typeof Component' is not assignable to parameter of type 'ClassType<any, Component, ComponentClass<{}, any>>'.
  Type 'typeof Component' is not assignable to type 'ComponentClass<{}, any>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type '{}' is not assignable to type 'Readonly<Props>'.
        Property 'a' is missing in type '{}'.

21 const component = TestUtils.findRenderedComponentWithType(div, Component)
                                                                  ~~~~~~~~~

Is this a bug? If I disable the --strict option, or omit the <Props> in Component<Props>, it compiles successfully.


Solution

  • The react-dom type declarations were not designed to work when the strictFunctionTypes option is enabled. I have a change to fix the problem you saw and a few others related to strictFunctionTypes. See this answer for the possible ways you can use my modified declarations until they get merged into DefinitelyTyped.