reactjs - Hur man sätter typer för monteringsfunktion i enzyme-tester?

Jag använder Typescript och Enzyme för att testa React-komponenter. Jag är väldigt ny på Typescript.

Jag har den här hjälpfunktionen i tester:

const getComponent = (mountFn = shallow) => (
  mountFn(<Component />)
)

Detta fungerar när jag kör det som getComponent() men så fort jag gör getComponent(mount) misslyckas det eftersom TypeScript antar att getComponent returnerar ShallowWrapper.

Jag har ett par frågor:

  1. Hur talar jag om för Typescript att mountFn kan vara antingen shallow eller mount?
  2. Hur säger jag åt det att returvärdet kan vara av typen ShallowWrapper eller ReactWrapper?
  3. I idealfallet - hur säger jag till det att returvärdet ska vara av typen ShallowWrapper när shallow skickades och ReactWrapper när mount skickades?
  4. Hur gör jag detta med typer som redan är definierade i @types/enzyme?
  5. Är detta en bra praxis överhuvudtaget? Jag brukade göra det hela tiden innan jag använde TypeScript, men kanske borde jag istället skapa två separata funktioner?

Svar #1

Hur säger jag till Typescript att mountFn kan vara antingen shallow eller mount?

Detta kommer att göra susen.

import {ShallowWrapper, ReactWrapper} from 'enzyme';

type mountFnType<P, S> = (node: React.ReactElement<P>, options?: any): ShallowWrapper<P, S> | ReactWrapper<P, S>

const getComponent = <P, S>(mountFn: mountFnType<P, S>) => (
     mountFn(<Component />)
)

Här kan du, om du vill, skapa en typalias för ShallowWrapper och ReactWrapper med hjälp av unionstyper.

type Wrapper<P, S> =  ShallowWrapper<P, S> | ReactWrapper<P, S>;

Nu kommer din funktion att se ut så här,

type mountFnType<P, S> = (node: React.ReactElement<P>, options?: any) => Wrapper<P, S>;

const getComponent = <P, S>(mountFn: mountFnType<P, S>) => (
     mountFn(<Component />)
)

Hur talar jag om för det att returvärdet kan vara av typen ShallowWrapper eller ReactWrapper?

Genom att lägga till returtypen,

const getComponent = <P, S>(mountFn: mountFnType<P, S>): Wrapper<P, S>

I idealfallet - hur talar jag om för det att returvärdet ska vara av typen ShallowWrapper när shallow skickades och ReactWrapper när mount skickades?

Du behöver inte ange det manuellt.

Hur gör jag detta med typer som redan är definierade i @types/enzyme?

Vi använder redan typdefinitionen av shallow och mount från @types/enzyme.

Är detta en bra praxis överhuvudtaget? Jag brukade göra det hela tiden innan jag använde TypeScript, men kanske borde jag istället skapa två separata funktioner?

Det är nog bara en fråga om preferens, antar jag. Du kan använda hjälpfunktionerna för att göra en del arbete enklare. Om jag vore i din situation skulle jag också ha skickat komponenten som det andra argumentet. Så slutligen kommer din kod att se ut så här,

import {ShallowWrapper, ReactWrapper} from 'enzyme';

type Wrapper<P, S> =  ShallowWrapper<P, S> | ReactWrapper<P, S>;

type mountFnType<P, S> = (node: React.ReactElement<P>, options?: any) => Wrapper<P, S>;

const getComponent = <P, S>(mountFn: mountFnType<P, S>, CustomComponent: React.ComponentClass<P>): Wrapper<P, S> => {
      return mountFn(<CustomComponent />);
};

Hoppas det här hjälper :)

Relaterade artiklar