Impossible de lire la propriété".puis' undefined lors de l'essai d'action asynchrone créateurs avec redux et de réagir

Je suis en train d'écrire quelques test à l'aide de réagir, redux-mock-magasin et redux, mais je reçois l'erreur. Peut-être parce que mon Promise n'a pas encore été résolu?

La fetchListing() action créateur en fait, il fonctionne quand je l'ai essayer sur dev et de la production, mais je vais avoir des problèmes pour faire le test.

message d'erreur

(node:19143) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): SyntaxError
(node:19143) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
 FAIL  src/actions/__tests__/action.test.js
  ● async actions › creates "FETCH_LISTINGS" when fetching listing has been done

    TypeError: Cannot read property 'then' of undefined

      at Object.<anonymous> (src/actions/__tests__/action.test.js:44:51)
          at Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:169:7)

  async actions
    ✕ creates "FETCH_LISTINGS" when fetching listing has been done (10ms)

action/index.js

//actions/index.js
import axios from 'axios';

import { FETCH_LISTINGS } from './types';

export function fetchListings() {

  const request = axios.get('/5/index.cfm?event=stream:listings');

  return (dispatch) => {
    request.then(( { data } ) => {
      dispatch({ type: FETCH_LISTINGS, payload: data });
    });
  }
};

action.test.js

//actions/__test__/action.test.js

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { applyMiddleware } from 'redux';
import nock from 'nock';
import expect from 'expect';

import * as actions from '../index';
import * as types from '../types';


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

describe('async actions', () => {
  afterEach(() => {
    nock.cleanAll()
})


it('creates "FETCH_LISTINGS" when fetching listing has been done', () => {
  nock('http://example.com/')
    .get('/listings')
    .reply(200, { body: { listings: [{ 'corpo_id': 5629, id: 1382796, name: 'masm' }] } })

    const expectedActions = [
      { type: types.FETCH_LISTINGS }, { body: { listings: [{ 'corpo_id': 5629, id: 1382796, name: 'masm' }] }}
    ]

    const store = mockStore({ listings: [] })

    return store.dispatch(actions.fetchListings()).then((data) => {
      expect(store.getActions()).toEqual(expectedActions)
    })
  })
})

Merci d'avance.

OriginalL'auteur intercoder | 2017-07-05

15

store.dispatch(actions.fetchListings()) retourne undefined. Vous ne pouvez pas appeler .then.

Voir redux-code de thunk. Il exécute la fonction de retour et des rendements. La fonction de retour dans fetchListings ne retourne rien, c'est à dire undefined.

Essayer
```
return (dispatch) => {
    return request.then( (data) => {
      dispatch({ type: FETCH_LISTINGS, payload: data });
    });
  }
```
Après que vous aurez encore un autre problème. Vous n'avez rien retourner à l'intérieur de votre then, vous seul envoi. Cela signifie que la prochaine then obtient undefined argument

fetchListings() effectivement travaille quand je l'utilise je peux voir les données sur mon app - mais est-il une meilleure façon d'écrire cette fonction? Qu'en est test lui-même comment puis-je l'écrire?
L'écriture de tests de code asynchrone peut être difficile. L'un des principaux points de vente de redux-saga sur redux-thunk est la facilité du test, de sorte que vous voudrez peut-être consulter à la bibliothèque.
Assurez-vous redux-saga est plus facile à tester car il utilise seulement les objets simples, mais redux-thunk doit être assez facile à tester. Le problème ici est de savoir comment il gère les promesses (et quelques autres choses). Voir ma réponse mis à jour
Avez-vous trouvé une solution pour les tests? J'ai la même configuration de test et obtenir la même erreur.
Honnêtement, je ne me souviens pas. Tis est un vieux projet que je travaillais sur. Je vais vérifier à nouveau dans les jours suivants, et si je trouve quelque chose je vais le poster ici 🙂

OriginalL'auteur Lewis Diamond
5

Je sais aussi que c'est un vieux fil, mais vous devez vous assurer de retour de l'action asynchrone à l'intérieur de votre thunk.

Dans mon thunk j'avais besoin de:
```
return fetch()
```
de l'action asynchrone et il a travaillé

OriginalL'auteur Box and Cox

Je sais que c'est un vieux thread. Mais je pense que le problème est que votre action créateur n'est pas asynchrone.

Essayer:

export async function fetchListings() {
  const request = axios.get('/5/index.cfm?event=stream:listings');
  return (dispatch) => {
    request.then(( { data } ) => {
      dispatch({ type: FETCH_LISTINGS, payload: data });
    });
  }
}

OriginalL'auteur Scott Dakers

Vous devez vous connecter pour publier un commentaire.