typescript - Hur man mockar en modul som innehåller ett snedstreck?

Att mocka ett standard npm-projekt är enkelt. Skapa en __mocks__-mapp bredvid node_modules-mappen, sedan lägger du paketets namn som fil och skriver mockinnehållet däri.

Exempel: /__mocks__/axios.ts

Det jag sitter fast med är att ha ett npm-paketimport som ser ut så här: @auth0/auth0-react

Hur kan jag imitera innehållet i den här filen? Jag försökte skapa en fil med namnet @auth0/auth0-react.tsx men jest verkar inte plocka upp den imiterade filen. När jag importerar import { Auth0Provider } from '@auth0/auth0-react'; och console.log(Auth0Provider), får jag bara de vanliga Jest.fn() attributen.

Här är innehållet i den simulerade filen

/* eslint-disable import/prefer-default-export */
export const Auth0Provider = (component: JSX.Element): JSX.Element => component;

Eftersom jag inte använde jest.fn() på denna ena metod, förväntar jag mig att console.log(Auth0Provider) visar att den innehåller en funktion.

I min testkod har jag jest.mock('@auth0/auth0-react') innan mitt test. Några idéer?

Svar #1

Jag hittade lösningen via en annan StackOverflow-fråga av kcarra.

För att sammanfatta svaret kommer jag att besvara det med 2 punkter:

  1. Katalogen __mocks__ måste vara i närheten av filen som testas. Om din fil ligger under /src/MyComponent, då bör sökvägen för mocks-mappen vara /src/__mocks__/.

  2. Mappstrukturen under __mocks__ måste efterlikna sökvägen som visas i din import. I mitt scenario behöver jag skapa en mapp som heter @auth0 och sedan en fil som heter auth0-react.tsx i den mappen.

Här är hur jag strukturerade mina test- och mockfiler.

  • mocks: /src/__mocks__/@auth0/auth0-react.tsx
  • tester: /src/__tests__/MyComponent.tsx
  • Faktisk komponentfil: /src/MyComponent.tsx

Relaterade artiklar