Preact/Typescript/Enzyme: Property 'refs' is missing in type 'Component<any, {}>'

Viewed 408

I'm configuring Jest for a project using Preact, Typescript, and Parcel. Everything works in the component code itself, but when setting up a Jest test and rendering a component with Enzyme's mount or shallow functions (with the preact adapter), I receive an error indicating that the type being passed into the function is missing the ref attribute:

src/features/homepage/homepage.spec.tsx:10:13 - error TS2769: No overload matches this call.
  Overload 1 of 3, '(node: ReactElement<any, string | JSXElementConstructor<any>>, options?: MountRendererProps | undefined): ReactWrapper<any, Readonly<...>, Component<...>>', gave the following error.
    Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any, string | JSXElementConstructor<any>>'.
      Types of property 'type' are incompatible.
        Type 'string | ComponentType<any>' is not assignable to type 'string | JSXElementConstructor<any>'.
          Type 'ComponentClass<any, {}>' is not assignable to type 'string | JSXElementConstructor<any>'.
            Type 'ComponentClass<any, {}>' is not assignable to type 'new (props: any) => Component<any, any, any>'.
              Property 'refs' is missing in type 'Component<any, {}>' but required in type 'Component<any, any, any>'.
  Overload 2 of 3, '(node: ReactElement<any, string | JSXElementConstructor<any>>, options?: MountRendererProps | undefined): ReactWrapper<any, any, Component<...>>', gave the following error.
    Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any, string | JSXElementConstructor<any>>'.
  Overload 3 of 3, '(node: ReactElement<any, string | JSXElementConstructor<any>>, options?: MountRendererProps | undefined): ReactWrapper<any, unknown, Component<...>>', gave the following error.
    Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any, string | JSXElementConstructor<any>>'.

10             <Homepage/>
               ~~~~~~~~~~~

  node_modules/@types/react/index.d.ts:501:9
    501         refs: {
                ~~~~
    'refs' is declared here.

Is there some conflict between the latest versions of @types/react and Enzyme? And if so, is there some best practice for overriding this type declaration?

0 Answers
Related