Javascript React-Redux异步操作测试

我编写了测试来测试异步操作。我当前遇到以下错误

TypeError:cannotreadpoperty'then'of undefined

，它指向我代码中的下一行

return store.dispatch(actions.fetchMovies()).then(() => {

这是我的密码：

异步操作测试：

import { createStore, applyMiddleware } from 'redux';
import initialState from '../reducers/initialState';
import rootReducer from '../reducers/index';
import thunk from 'redux-thunk';
import * as actions from './actions';
import * as ActionTypes from '../constants/constants';
import nock from 'nock';
import { expect } from 'chai';
import API_KEY from '../config/config';

const MOVIES_API = 'https://api.themoviedb.org/3/discover/movie?api_key='+API_KEY;

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

  it('creates FETCH_MOVIES_SUCCESS when fetching movies is complete', () => {
    nock(MOVIES_API)
      .get()
      .reply(200, {data: {results: [{title: 'Batman vs Superman'}]}});

    const expectedActions = [
      { type: ActionTypes.FETCH_MOVIES },
      { type: ActionTypes.FETCH_MOVIES_SUCCESS, data: {results: [{title: 'Batman vs Superman'}]}}
    ];

    const store = createStore(rootReducer, initialState, applyMiddleware(thunk));

    return store.dispatch(actions.fetchMovies()).then(() => {
        expect(store.getActions()).to.deep.equal(expectedActions);
      });
  });
});

行动：

import axios from 'axios';

import * as constants from '../constants/constants';
import API_KEY from '../config/config';


export const fetchMovies = () => {
  const MOVIES_API = 'https://api.themoviedb.org/3/discover/movie?api_key='+ API_KEY;

  return dispatch => {
    dispatch({
      type: constants.FETCH_MOVIES
    });
    axios.get(MOVIES_API).then(function(response) {
      dispatch({
        type: constants.FETCH_MOVIES_SUCCESS,
        data: response.data.results
      });
    })
    .catch(function(res) {
      dispatch({
        type: constants.FETCH_MOVIES_ERROR,
        msg: res.message
      });
    });
  };
};

这是第一次测试异步操作，所以我不确定出了什么问题。

尝试使用而不是

redux

createStore（）。这是一个模拟存储区，用于测试异步操作创建者和中间件。Github页面还包括一些如何使用它的示例

编辑：

---

当您修改动作创建者以使其返回axios.get（MOVIES\u API）的结果时会发生什么情况？

这是因为您的动作不返回承诺-更改动作以返回可以等待的承诺。这不是必需的，但是如果您想知道API调用何时完成（即，您的单元测试想知道在这种特定情况下），那么您可以返回一个承诺，作为操作的一个方便的副作用：

export const fetchMovies = () => {
  const MOVIES_API = 'https://api.themoviedb.org/3/discover/movie?api_key='+ API_KEY;

  return dispatch => {
    dispatch({
      type: constants.FETCH_MOVIES
    });

    // Return a promise
    return axios.get(MOVIES_API).then(function(response) {
      dispatch({
        type: constants.FETCH_MOVIES_SUCCESS,
        data: response.data.results
      });
    })
    .catch(function(res) {
      dispatch({
        type: constants.FETCH_MOVIES_ERROR,
        msg: res.message
      });
    });
  };
}

---

)

我首先尝试使用redux模拟商店，结果也发生了同样的事情。这就是为什么我转而创建一个普通商店，因为我在一个例子中也看到了这一点。我不应该改变动作的回报来让它工作……动作很好，我想你应该试试。当您的操作创建者没有返回承诺时，您无法链接另一个

then（）

。请重写它，然后测试正在运行，现在会得到一个错误

error:Nock:No match for request gethttps://api.themoviedb....

@erichardson30您是如何解决这个问题的？介意与大家分享一下吗：）我只想提及redux saga作为处理异步操作流的一种方式。它的一部分好处是可以轻松地测试异步操作的每个部分。