使用 Redux Thunk 和 Axios 测试 Action Creator

Posted 2023-02-22

【中文标题】使用 Redux Thunk 和 Axios 测试 Action Creator

【英文标题】：Testing Action Creator with Redux Thunk & Axios

【发布时间】：2018-09-27 16:11:54

【问题描述】：

我有一个 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: "[e-mail]", password: "1234"
    store.dispatch(signinUser(testData)).then(() => 
      const actualAction = store.getActions()
      expect(actualAction).to.eql(expectedAction)
    )
  )
)

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

【参考方案1】：

store.dispatch(someThunk()).then() 仅在 thunk 返回承诺时有效，而您的 thunk 实际上并未返回承诺。

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

【讨论】：

非常感谢！