Jak zesměšňovat háky React pomocí vkládání závislostí

Při používání háčků v Reactu jste možná použili nebo viděli tento druh vzoru, kde používáte data z háku k vykreslení komponenty:

import { useData } from 'use-data';

const App = () => {
    const [data] = useData();
    return <Component data={data} />;
}

export default App;

Když však přijde čas otestovat tuto komponentu nebo ji zobrazit pomocí Storybook, nemusí se vykreslit! Obvyklou příčinou by bylo, kdyby hák volal koncový bod REST – který nebude dostupný ve scénáři testování nebo Storybook.

Můžeme použít vzor známý jako injekce závislosti jak tento problém obejít.

Co je vkládání závislosti?

Wikipedie říká:

Ve výše uvedeném příkladu bychom řekli, že App komponenta je závislá na useData háček. A právě teď získává svou vlastní závislost tím, že ji importuje.

S injekcí závislosti , cokoliv vykreslí App může poskytnout useData závislost. V Reactu to můžeme udělat předáním useData jako rekvizita.

Použití vkládání závislostí

Injekce závislosti ve své nejzákladnější podobě by vypadala takto:

const App = ({ useData }) => {
    const [data] = useData();
    return <Component data={data} />;
}

App již není odpovědný za to, že víte, kde je useData pochází a právě ho používá!

Hlavním problémem je, že pokaždé jiná komponenta vykreslila App , museli by provést práci importu a předání v useData pro to:

import { useData } from 'use-data';

//usage:
<App useData={useData} />

Což je trochu hloupé, vezmeme-li v úvahu, že většinu času budeme míjet ve stejném useData .

Použití vkládání závislostí s výchozími rekvizitami

V Reactu můžeme využít výchozí rekvizity povolit use-data import, který se má použít jako výchozí:

import { useData as useDataDI } from 'use-data';

const App = ({ useData = useDataDI }) => {
    const [data] = useData();
    return <Component data={data} />;
}

Pokud useData prop se nepředává, ve výchozím nastavení použijeme useDataDI - což je hák importovaný z use-data .

Pak pro všechna normální použití této komponenty ji můžeme jednoduše vykreslit jako normálně:

<App /> // we don't need to do anything else!

A když chceme komponentu použít v testech jednotek nebo Storybooks, můžeme předat vlastní useData háček s falešnými daty:

const mockData = { foo: "bar" };
const mockUseData = () => [mockData];

// Usage:
<App useData={mockUseData} />

Alternativy k vkládání závislostí

Jednou z nevýhod vkládání závislostí je, že vyžaduje, abyste ke své komponentě přidali další podpěru, kterou byste jinak neměli. Pokud nechcete použít vzor vkládání závislosti, existuje několik alternativ:

• Při testování s Jest je možné zesměšňovat importy a to zahrnuje i háčky
• Volání koncových bodů můžete zesměšňovat pomocí knihoven, jako je fetch-mock (které bude fungovat také s Storybook)
• Pokud chcete zesměšňovat háčky pomocí Storybook, neexistují žádná populární řešení (o kterých vím), ale existuje knihovna Reag-magnetic-di, která může vyhovovat vašim potřebám, pokud byste chtěli zkuste to

Děkujeme za přečtení!