typescript - Použitie dependency Injection s vue/vitest

  1. Moje nastavenie
  • Aplikácia Vue 3
  • Obchody Pinia
  • V mojom main.ts : app.use(myPlugin)
  • V MyPlugin.ts : Podľa určitých podmienok prostredia podmienene vytváram a poskytujem úložisko (MyRepo) aplikácii. Toto úložisko môže buď komunikovať s API, alebo poskytovať falošné dáta na účely vývoja a testovania.
  • V myStore.ts :
defineStore('myStore', () => {
  const repo = inject<MyRepoInterface>('myRepo');
  // ....
})
  1. Môj problém

Čelím problému pri písaní testov, ktoré závisia od store, ktorý sám závisí od myStore. Keď je funkcia inject volaná v mojom teste, dostanem nasledovné varovanie: [Vue warn]: inject() je možné použiť iba vo vnútri setup() alebo funkčných komponentov. Okrem toho je repo undefined, čo spôsobuje chyby.

  1. Moja otázka

Hľadám riešenie, ako poskytnúť repozitár počas nastavenia môjho testovacieho frameworku (Vitest). Týmto spôsobom ho môžem vložiť do svojho kódu počas normálneho behu aplikácie aj pri spúšťaní testov. Ako to môžem dosiahnuť?

Každá kritika ohľadom spôsobu, akým sa snažím dosiahnuť Dependency Injection, je vítaná. Ďakujem!

Odpoveď č. 1

Pinia úložiská sú singletony, ktoré sa inštancujú pri prvom volaní funkcie úložiska. To, že inject sa používa v nastavovacej funkcii Pinia úložiska, znamená, že prvé použitie by malo byť vo Vue komponentovom setup alebo súčasných životných cykloch, zatiaľ čo pre Pinia úložiská všeobecne takáto obmedzenosť neplatí.

Bolo by tiež nemožné definovať obchod týmto spôsobom s možnosťami obchodu namiesto funkcie, aj keď sú vo všeobecnosti zameniteľné.

Flexibilnejší a pre testovanie vhodnejší spôsob je použiť explicitnú injekciu závislostí v metóde store:

let repo = ref(null as unknown as MyRepoInterface);

let init = (cfg: { repo: MyRepoInterface }) => {
  repo.value = cfg.repo;
})

A v komponente App:

useMyStore().init({
  repo: inject<MyRepoInterface>('myRepo')
})