Wie unit-Tests in diesem Redux thunk?

Wie Unit-Tests Redux Thunks

Den ganzen Punkt ein thunk-Aktion creator ist der Versand asynchrone Aktionen in der Zukunft. Bei der Verwendung von redux-thunk ein guter Ansatz ist das Modell der asynchronen Fluss der Anfang und das Ende resultierende Erfolg oder ein Fehler mit drei Aktionen.

Obwohl in diesem Beispiel verwendet Mocha und Chai zum testen könnte man durchaus als leicht zu verwenden, eine assertion-Bibliothek oder Test-Frameworks.

Modellierung der asynchronen Prozess mit mehreren Aktionen, geschafft von unserem Haupt-thunk-Aktion creator

Lassen Sie uns annehmen, zum Wohle dieses Beispiel, das Sie ausführen möchten, ein asynchroner Vorgang, dass updates ein Produkt und wollen wissen, drei entscheidende Dinge.

• Wenn der asynchrone Vorgang beginnt
• Wenn der asynchrone Vorgang beendet
• Ob die asynchrone operation erfolgreich war oder fehlgeschlagen ist

Okay so Zeit zu Modell unsere redux Aktionen basierend auf diesen Stufen der Betrieb des Lebenszyklus. Denken Sie daran das gleiche gilt für alle asynchronen Operationen, so würde Häufig angewendet werden, um http-Anforderungen zum abrufen von Daten aus einer api.

Können wir schreiben unsere Aktionen so gerne.

accountDetailsActions.js:

export function updateProductStarted (product) {
  return {
    type: 'UPDATE_PRODUCT_STARTED',
    product,
    stateOfResidence
  }
}

export function updateProductSuccessful (product, stateOfResidence, timeTaken) {
  return {
    type: 'PRODUCT_UPDATE_SUCCESSFUL',
    product,
    stateOfResidence
    timeTaken
  }
}

export function updateProductFailure (product, err) {
  return {
    product,
    stateOfResidence,
    err
  }
}

//our thunk action creator which dispatches the actions above asynchronously
export function updateProduct(product) {
  return dispatch => {
    const { accountDetails } = getState()
    const stateOfResidence = accountDetails.stateOfResidence

    //dispatch action as the async process has begun
    dispatch(updateProductStarted(product, stateOfResidence))

    return updateUser()
        .then(timeTaken => {
           dispatch(updateProductSuccessful(product, stateOfResidence, timeTaken)) 
        //Yay! dispatch action because it worked
      }
    })
    .catch(error => {
       //if our updateUser function ever rejected - currently never does -
       //oh no! dispatch action because of error
       dispatch(updateProductFailure(product, error))

    })
  }
}

Beachten damit beschäftigt, Maßnahmen auf der Unterseite. Das ist unser thunk action Schöpfer. Da gibt es eine Funktion, es ist eine Besondere Aktion, die abgefangen wird von redux-thunk-middleware. Dass thunk Aktion creator versenden können die anderen action-Macher an einem Punkt in der Zukunft. Ziemlich smart.

Nun haben wir geschrieben, die Aktionen zu modellieren, wird ein asynchroner Prozess, der einen Benutzer zu aktualisieren. Lassen Sie uns sagen, dass dieser Prozess eine Funktion aufrufen, die eine Zusage zurückgibt, als wäre die häufigste Methode heute für den Umgang mit asynchronen Prozessen.

Definieren Sie die Logik für das eigentliche asynchrone operation, die wir modellieren mit redux Aktionen

Für dieses Beispiel werden wir nur schaffen, eine generische Funktion, die eine Zusage zurückgibt. Ersetzen Sie diese mit der eigentlichen Funktion, dass updates Benutzer oder funktioniert der asynchrone Logik. Sicherstellen, dass die Funktion gibt ein Versprechen.

Verwenden wir die definierte Funktion unten, um die zum erstellen eines funktionierenden selbst-enthalten Beispiel. Um ein funktionierendes Beispiel, nur werfen Sie diese Funktion in Ihren Aktionen-Datei, so ist es im Rahmen Ihrer thunk Aktion creator.

 //This is only an example to create asynchronism and record time taken
 function updateUser(){
      return new Promise( //Returns a promise will be fulfilled after a random interval
          function(resolve, reject) {
              window.setTimeout(
                  function() {
                      //We fulfill the promise with the time taken to fulfill
                      resolve(thisPromiseCount);
                  }, Math.random() * 2000 + 1000);
          }
      )
})

Unsere test-Datei

import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import chai from 'chai' //You can use any testing library
let expect = chai.expect;

import { updateProduct } from './accountDetailsActions.js'

const middlewares = [ thunk ]
const mockStore = configureMockStore(middlewares)

describe('Test thunk action creator', () => {
  it('expected actions should be dispatched on successful request', () => {
    const store = mockStore({})
    const expectedActions = [ 
        'updateProductStarted', 
        'updateProductSuccessful'
    ]

    return store.dispatch(fetchSomething())
      .then(() => {
        const actualActions = store.getActions().map(action => action.type)
        expect(actualActions).to.eql(expectedActions)
     })

  })

  it('expected actions should be dispatched on failed request', () => {
    const store = mockStore({})
    const expectedActions = [ 
        'updateProductStarted', 
        'updateProductFailure'
    ]

    return store.dispatch(fetchSomething())
      .then(() => {
        const actualActions = store.getActions().map(action => action.type)
        expect(actualActions).to.eql(expectedActions)
     })

  })
})

export const someAsyncAction = (param) => (dispatch, getState) => {
    const { mock } = getState();
    dispatch({
        type: 'SOME_TYPE',
        mock: mock + param,
    })
}

it('should test someAsyncAction', () => {
    const param = ' something';
    const dispatch = jest.fn().mockImplementation();
    const getState = () => ({
        mock: 'mock value',
    });

    const expectedAction = {
        type: 'SOME_TYPE',
        mock: 'mock value something'
    };

    const callback = someAsyncAction(param);
    expect(typeof callback).toBe('function');

    callback.call(this, dispatch, getState);
    expect(dispatch.mock.calls[0]).toEqual([expectedAction])
});