web-dev-qa-db-fra.com

Impossible de lire la propriété «.then» de non défini lors du test des créateurs d'actions asynchrones avec redux et de réagir

J'essaie d'écrire un test en utilisant react, redux-mock-store et redux, mais je continue à recevoir des erreurs. Peut-être parce que mon Promise n'a pas encore été résolu?

Le créateur d'action fetchListing() fonctionne réellement lorsque je l'essaie sur le développement et la production, mais j'ai des problèmes pour réussir 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)
    })
  })
})
reactjsreduxjestjsredux-mock-store
17
intercoder

store.dispatch(actions.fetchListings()) renvoie undefined. Vous ne pouvez pas appeler .then sur ça.

Voir code redux-thunk . Il exécute la fonction que vous renvoyez et la renvoie. La fonction que vous renvoyez dans fetchListings ne renvoie rien, c'est-à-dire undefined.

Essayer

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

Après cela, vous aurez toujours un autre problème. Vous ne renvoyez rien à l'intérieur de votre then, vous n'envoyez que. Cela signifie que le prochain then obtient undefined argument

16
Lewis Diamond

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

Dans mon thunk, je devais:

return fetch()

l'action asynchrone et cela a fonctionné

7
Box and Cox

Je sais que c'est un vieux fil. Mais je pense que le problème est que votre créateur d'action 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 });
    });
  }
}
2
Scott Dakers

Votre créateur d'action doit retourner un promesse comme indiqué ci-dessous:

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

import { FETCH_LISTINGS } from './types';

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