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/"]
}
