reactjs - Prečo jest nedokáže poskytnúť hook useTranslation vlastnému React hooku, ktorý testujem?

Vytváram test pre vlastný hook a kontrolujem, či správne analyzuje údaje. Vlastný hook používa hook useTranslation z i18next. V testovacom súbore som hook useTranslation nasimuloval takto:

jest.mock('react-i18next', () => ({
  useTranslation: () => {
    return {
      t: (key: string) => key,
    }
  },
}))

Nezobrazuje mi žiadne chyby, jednoducho to neprekladá a vráti lokalizačné kľúče na poliach, ktoré má preložiť. Robím mocking nesprávnym spôsobom alebo by som mal urobiť nejakú ďalšiu konfiguráciu?

Odpoveď č. 1

Myslím si, že existuje nedorozumenie ohľadom účelu napodobňovania a testovania.

Podľa dokumentácie Jest:

Mock funkcie vám umožňujú testovať väzby medzi kódmi tým, že vymažú skutočnú implementáciu funkcie, zachytávajú volania tejto funkcie (a parametre odovzdané v týchto volaniach), zachytávajú inštancie konštrukčných funkcií pri vytvorení pomocou new a umožňujú konfiguráciu návratových hodnôt počas testovania.

Ak chcete otestovať funkčnosť vášho háku useTranslation, môžete vytvoriť test (bez mockovania). Týmto spôsobom môžete otestovať funkčnosť a správanie vášho háku v rôznych scenároch.

Teraz späť k vášmu kódu, ak chcete testovať komponent, ktorý používa externú funkciu, môžete túto funkciu nasimulovať a odovzdať ju komponentu. Takže v tomto prípade stačí nasimulovať funkciu a napísať o nej niekoľko výnimiek.

Napríklad, máte komponent formulára, ktorý má tlačidlo odoslať, s odoslaním sa údaje pošlú na server, takže môžete túto akciu odoslania nasimulovať a odovzdať ju komponentu v testovacom prostredí, potom očakávate, že pri kliknutí na tlačidlo odoslať sa spustí obslužná funkcia raz.

Takže ak chcete napodobniť svoj hák, musíte pre neho vrátiť falošné údaje:

const mockMyHook = jest.fn(x => 'translated');

Teraz volajte tento falošný hák vo vašej komponente a pri očakávaní s x vstupom získajte tanslated hodnotu.