Reactjs 如何在react中使用axios测试异步操作？

我有一个action generator register.js：

import { REGISTER_SUCCESS, REGISTER_FAIL } from "./types";
import axios from "axios";

export const register = (formData) => async (dispatch) => {
  const { name, email, password } = formData;
  const configRegister = {
    method: "post",
    url: "/api/users",
    headers: { "Content-Type": "application/json" },
    data: { name, email, password },
  };
  try {
    const res = await axios(configRegister);
    const token = res.data.token;
    dispatch({
      type: REGISTER_SUCCESS,
      payload: {
        token,
        isAuthenticated: true,
        loading: false,
      },
    });
  } catch (err) {
    console.error(err);
    dispatch({
      type: REGISTER_FAIL,
      payload: {
        token: null,
        isAuthenticated: false,
        loading: true,
      },
    });
  }
}; 

端点

/api/users

在成功时返回

{token:'a_token_string'}

如何使用jest测试此动作生成器？

我试过这么做，register.test.js：-

import {
  REGISTER_SUCCESS,
} from "./types";
import thunk from "redux-thunk";
import configureMockStore from "redux-mock-store";
import axios from "axios";

jest.mock("axios");
    
/** mock-store */
const createMockStore = configureMockStore([thunk]);
const defaultState = [];
const store = createMockStore(defaultState);
/** reset mock */
afterEach(() => jest.resetAllMocks());

test("should register a  user ", async () => {
  axios.post.mockImplementation(() => {
    return Promise.resolve({
      status: 200,
      body: {
        token: "testToken",
      },
    });
  });
  const res = await axios.post("/api/users");
  console.log(res.body);
  const testUser = {
    name: "testName",
    email: "test@email.com",
    password: "testPassword",
  };
  await store.dispatch(register(testUser)).then(() => {
    expect(store.getActions()[0]).toEqual({
      type: REGISTER_SUCCESS,
      payload: {
        token: "testToken",
        isAuthenticated: true,
        loading: false,
      },
    });
  });
});

---

你就快完成了。问题是，当您的实现直接从

axios

对象使用时，您正在模拟

axios.post

。只要您模拟axios对象，它就会正常工作。以下是建议的更改，请检查内联注释，了解您还应更改的内容：

test（“应该注册用户”），async（）=>{
//直接模拟axios对象
axios.mockImplementation（（）=>{
还愿({
现状：200，
//也应该从“body”改为“data”
数据：{
令牌：“testToken”，
},
});
});
//由于模拟已更改，它将不再工作
//const res=wait axios.post（“/api/users”）；
//控制台日志（res.body）；
常量testUser={
名称：“testName”，
电子邮件：“test@email.com",
密码：“testPassword”，
};
等待store.dispatch（register（testUser））。然后（（）=>{
expect（store.getActions（）[0]）.toEqual({
类型：注册成功，
有效载荷：{
令牌：“testToken”，
我证实：是的，
加载：false，
},
});
});
});

谢谢，它成功了。我对此有点陌生，您能告诉我如何为REGISTER\u FAIL case编写测试吗？您只需要在失败的情况下更改您的mock-in，如下所示：

axios.mockRejectedValue（{status:500/*无论您想要什么，因为您只需要记录它*/}）

ok。我会试试的。我必须给你看我的代码。所以我提出了一个新问题。你能看看这个吗