使用 Redux Thunk 和 Axios 测试 Action Creator

Question

我有一个 redux-thunk 动作创建器，它通过 axios 发出 API 请求，然后该请求的结果决定了将哪种动作分派到我的 reducer（AUTH 或 UNAUTH）。

这很好用，但我不确定测试此功能的正确方法是什么。我已经找到了下面的解决方案，但在我的测试中出现以下错误：

1) AUTH ACTION
   returns a token on success:
     TypeError: Cannot read property 'then' of undefined

现在这个错误让我相信我真正从我的动作创作者那里得到的不是一个承诺，但我真的在努力寻找前进的道路。

src/actions/index.js

import axios from "axios";

import { AUTH_USER } from "./types";

const ROOT_URL = "http://localhost:";
const PORT = "3030";

export function signinUser({ email, password }) {
  return ((dispatch) => {
    axios
      .post(`${ROOT_URL}${PORT}/signin`, { email, password })
      .then(response => {
        // update state to be auth'd
        dispatch({ type: AUTH_USER });
        // Save token locally
        localStorage.setItem('token', response.data.token)
      })
      .catch(error => {
        dispatch({ type: AUTH_ERROR, payload: error });
      });
  });
}

test/actions/index_test.js

import { expect } from "../test_helper";
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import moxios from 'moxios';

import { AUTH_USER } from "../../src/actions/types";

import { signinUser } from "../../src/actions/index";

const middleware = [thunk];
const mockStore = configureMockStore(middleware);
let store;
let url;

describe('AUTH ACTION', () => {
  beforeEach(() => {
    moxios.install();
    store = mockStore({});
    url = "http://localhost:3030";
  });
  afterEach(() => {
    moxios.uninstall();
  });

  it('returns a token on success', (done) => {
    moxios.stubRequest(url, {
      status: 200,
      response: {
        data: {
          token: 'sample_token'
        }
      },
    });

    const expectedAction = { type: AUTH_USER }

    let testData = { email: "test1@test.com", password: "1234"}
    store.dispatch(signinUser(testData)).then(() => {
      const actualAction = store.getActions()
      expect(actualAction).to.eql(expectedAction)
    })
  })
})

任何帮助或见解将不胜感激。

Answer 1

store.dispatch(someThunk()).then() 只有当 thunk returns 是一个 promise 并且你的 thunk 实际上没有返回一个 promise 时才有效。

如果你只是在 axios() 前面放一个 return，它应该工作。

使用 Redux Thunk 和 Axios 测试 Action Creator

Testing Action Creator with Redux Thunk & Axios

chai

reactjs

redux

redux-thunk

axios