使用 redux 测试异步操作创建者并做出反应时，无法读取未定义的属性“.then" [英] Cannot read property '.then' of undefined when testing async action creators with redux and react

问题描述

我正在尝试使用 react、redux-mock-store 和 redux 编写一些测试，但我不断收到错误消息.可能是因为我的Promise还没有解决?

I'm trying to write some test using react, redux-mock-store and redux, but I keep getting and error. Maybe because my Promise has not yet been resolved?

fetchListing() 动作创建器在我在开发和生产中尝试时实际上可以工作，但是我在通过测试时遇到了问题.

The fetchListing() action creator actually works when I try it on dev and production, but I'm having problems making the test pass.

错误信息

(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)
    })
  })
})

推荐答案

store.dispatch(actions.fetchListings()) 返回 undefined.你不能调用 .then .

store.dispatch(actions.fetchListings()) returns undefined. You can't call .then on that.

请参阅 redux-thunk 代码.它执行您返回的函数并返回该函数.您在 fetchListings 中返回的函数不返回任何内容，即 undefined.

See redux-thunk code. It executes the function you return and returns that. The function you return in fetchListings returns nothing, i.e. undefined.

试试

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

在那之后，您仍然会遇到另一个问题.您不会在 then 内返回任何内容，您只会发送.这意味着下一个 then 得到 undefined 参数

After that you will still have another problem. You don't return anything inside your then, you only dispatch. That means the next then gets undefined argument

这篇关于使用 redux 测试异步操作创建者并做出反应时，无法读取未定义的属性“.then"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！