Wie können Redux-Aktionen getestet werden, die 'redux-api-middleware' und [CALL_API] verwenden?

Question

Ich habe eine Aktion addItemsToCollection genannt, die wie so ein Aufruf an eine API löst:

import {CALL_API} from 'redux-api-middleware'; 

export function addItemsToCollection(collectionId, itemIds) 
{ 
    return {[CALL_API]: 
    { 
     endpoint: `/collections/${collectionId}/items`, 
     method: 'POST', 
     body: JSON.stringify(itemIds), 
     types: 
     [ 
     ADD_ITEMS, 
     { type: ADD_ITEMS_SUCCESS }, 
     ADD_ITEMS_FAIL 
     ] 
    } 
    }; 
} 

Wenn ich versuche, einen Test einfach für diese Aktion zu schreiben wird erstellt, wie:

it('should create an action to add items to a collection',() => 
{ 
    const collectionId = 1; 
    const itemIds = [1,2,3]; 

    const expectedAction = 
    { 
    [CALL_API]: 
    { 
     endpoint: `/collections/${collectionId}/items`, 
     method: 'POST', 
     body: JSON.stringify(itemIds), 
     types: 
     [ 
     ADD_ITEMS, 
     { type: ADD_ITEMS_SUCCESS }, 
     ADD_ITEMS_FAIL 
     ] 
    } 
    }; 

    expect(addItemsToCollection(collectionId, itemIds)).toEqual(expectedAction); 
}); 

Es tut übergeben, aber das liegt daran, dass es das zurückgegebene und leere Objekt {} sowohl für expectAction als auch für die Aktion Creator-Funktion zurückgibt. Nicht viel nutzen.

Also meine Fragen sind,

Warum sind leer Objekte zurückgegeben werden?

Was ist der richtige Weg, um diesen Test zu machen?

Answer 1

Ihre erwartete Daten nicht berechnet werden, da es ein Teil dessen, was Sie testen:

const expectedAction = 
{ 
    [CALL_API]: { 
    endpoint: '/collections/1/items', 
    method: 'POST', 
    body: "[1,2,3]", 
    types: 
    [ 
     ADD_ITEMS, 
     { type: ADD_ITEMS_SUCCESS }, 
     ADD_ITEMS_FAIL 
    ] 
    } 
}; 

Sie schließlich die Konstanten verspotten und Rohdaten verwenden.

Für Ihre leeren Objekte kann es auf Ihren Import, Mocks, Test-Tools ... Es gibt zu viele Optionen.

Answer 2

CALL_API ist ein Symbol. Sie werden nicht angezeigt, wenn das Objekt nur an console.log übergeben wird. Wenn Sie den Schlüssel in Ihrem Objekt sehen möchten, können Sie Object.getOwnPropertySymbols(expectedAction) tun oder Sie können console.log(expectedAction[CALL_API]) und Sie erhalten dieses Objekt. (http://exploringjs.com/es6/ch_symbols.html)

Sie testen es richtig. Wenn Sie ein leeres Objekt verwenden würden, würde es nicht übereinstimmen. Wenn Sie ein Objekt mit einem anderen Symbol verwenden, stimmt es nicht überein.

Answer 3

Für alle, die dieses Problem haben, müssen Sie {apiMiddleware} von redux-api-middleware zu Ihrem Mock Store hinzufügen.