reactjs - 使用 Redux Thunk 和 Axios 测试 Action Creator

Question

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

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

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

现在这个错误让我相信我真正从 Action 创建者那里得到的并不是 promise ，而是我真的在努力寻找前进的方向。

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

测试/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: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d69786e692c5d69786e69337e7270" rel="noreferrer noopener nofollow">[email protected]</a>", password: "1234"}
    store.dispatch(signinUser(testData)).then(() => {
      const actualAction = store.getActions()
      expect(actualAction).to.eql(expectedAction)
    })
  })
})

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

Answer 1

store.dispatch(someThunk()).then() 仅当 thunk 返回 Promise 时才有效，并且您的 thunk 实际上并未返回 Promise。

如果您只是将 return 放在 axios() 前面，它应该可以工作。