• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Testowanie HOR z JEST

0 głosów
237 wizyt
pytanie zadane 3 sierpnia 2018 w JavaScript przez dzawadzki Nowicjusz (120 p.)

Cześć,

próbuję zrozumieć koncepcję pisania testów jednostkowych dla aplikacji frontendowych. Stworzyłem prosty higher order reducer, aby zaoszczędzić sobie czasu przy pisaniu standardowych reducerów do reduxowych asynchroniczych akcji, ale nie mam pojęcią jak to sensownie przetestować. Dodatkowo, zastanawia mnie, czy korzystam z flow w poprawny sposób.

Funkcja:

// @flow

type action = {
    type: string,
    payload?: any
};

/**
 * Async Reducer Factory to reduce duplicated code in async reducers.
 * Higher Order Reducer.
 *
 * @param {String} name - Reducer name.
 * @returns {Function}
 */
export const asyncReducerFactory = (name: String) => {
    return (
        state = { data: null, isLoading: false, error: null },
        action: action
    ) => {
        switch (action.type) {
            case `FETCH_${name}_STARTED`:
                return { data: null, isLoading: true, error: null };
            case `FETCH_${name}_SUCCESS`:
                return { data: action.payload, isLoading: false, error: null };
            case `FETCH_${name}_ERROR`:
                return { data: null, isLoading: false, error: action.payload };
            default:
                return state;
        }
    };
};

Testy:

import { asyncReducerFactory } from "./factories";

describe("Test async reducers factory", () => {
    const factory = asyncReducerFactory("TEST");

    it("should create reducer", () => {
        expect(factory).not.toBe(null);
    });

    it("should start fetching", () => {
        expect(factory({}, { type: "FETCH_TEST_STARTED" })).toEqual({
            data: null,
            isLoading: true,
            error: null
        });
    });

    it("should end fetching with success", () => {
        expect(
            factory({}, { type: "FETCH_TEST_SUCCESS", payload: "success" })
        ).toEqual({
            data: "success",
            isLoading: false,
            error: null
        });
    });

    it("should end fetching with error", () => {
        expect(
            factory({}, { type: "FETCH_TEST_ERROR", payload: "error" })
        ).toEqual({
            data: null,
            isLoading: false,
            error: "error"
        });
    });

    it("should return default state", () => {
        expect(factory({}, { type: "DIFFERENT" })).toEqual({});
    });
});

 

Czy nazwy akcji powinienem wydzielić do osobnych plików? Jak stworzyć bardziej generyczne rozwiązanie.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
2 odpowiedzi 609 wizyt
pytanie zadane 26 kwietnia 2022 w JavaScript przez Bakkit Dyskutant (7,600 p.)
+2 głosów
0 odpowiedzi 392 wizyt
pytanie zadane 3 grudnia 2021 w JavaScript przez lzrd Nowicjusz (160 p.)
0 głosów
0 odpowiedzi 174 wizyt
pytanie zadane 8 kwietnia 2020 w JavaScript przez Bakr Mądrala (6,850 p.)

93,695 zapytań

142,614 odpowiedzi

323,225 komentarzy

63,227 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Twierdza Linux. Bezpieczeństwo dla dociekliwych

Aby uzyskać rabat -10%, użyjcie kodu pasja-linux, wpisując go w specjalne pole w koszyku.

...