reactjs - Preact/Typescript/Enzyme: V type 'Component' chýba vlastnosť 'refs'


Konfigurujem Jest pre projekt používajúci Preact, Typescript a Parcel. Všetko funguje v samotnom kóde komponentu, ale pri nastavovaní testu v Jeste a renderovaní komponentu pomocou funkcií mount alebo shallow z Enzyme (s preact adaptér) sa mi zobrazuje chyba, ktorá naznačuje, že typ odovzdaný do funkcie postráda atribút ref:

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.

Existuje nejaký konflikt medzi najnovšími verziami @types/react a Enzyme? A ak áno, existuje nejaká osvedčená prax pre prepísanie tohto deklarovania typu?

Odpoveď č. 1

Dôvodom tejto chyby je stále otvorený problém s definíciou typu v preact. Riešením je pridať riadok do node_modules/preact/src/index.d.ts. Vyhľadajte componentDidCatch a pridajte tento riadok za ním:

refs: { [key: string]: Component<any> | Element; };.

Tým sa pridá chýbajúci člen refs do rozhrania Component v preact.

Ak nechcete opravovať nainštalovaný modul Node, pridajte mapovanie cesty do súboru tsconfig.json, ako je uvedené v tomto probléme.

    {
    "baseUrl": "./",
    "paths": {
      "react": ["./node_modules/preact/compat/"],
      "react-dom": ["./node_modules/preact/compat/"]
    }