Javascript createAsyncThunk未调度“；“履行”；试验中

我在测试一些依赖异步thunk的代码时遇到了一些问题

这是我的想法：

export const signup = createAsyncThunk(
  "auth/signup",
  async (payload, { dispatch }) => {
    try {
      const response = await axios.post(
        "https://localhost:5000/auth/signup",
        payload
      );

      const cookies = new Cookies();
      cookies.set("token", response.data.token);
      cookies.set("email", payload.email);

      // TODO: parse JWT fields and set them as cookies

      // TODO: return JWT fields here
      return { token: response.data.token, email: payload.email };
    } catch (err) {
      dispatch(
        actions.alertCreated({
          header: "Uh oh!",
          body: err.response.data.error,
          severity: "danger",
        })
      );

      throw new Error(err.response.data.error);
    }
  }
);

这就是所谓的测试：

import "@testing-library/jest-dom";

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import configureStore from "redux-mock-store";
import { Provider } from "react-redux";
import thunk from "redux-thunk";

import { signup } from "store/auth-slice";

import { SignUpFormComponent } from "./index";

const mockStore = configureStore([thunk]);
const initialState = {
  auth: {
    token: null,
    email: null,

    status: "idle",
  },
};

jest.mock("axios", () => {
  return {
    post: (url, payload) => {
      return Promise.resolve({
        data: {
          token:
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2MjA3MDcwODUwMDk3NDMwMDAsInN1YiI6ImZvb0BleGFtcGxlLmNvbSJ9.iykj3pxsOcFstkS6NCjvjLBtl_hvjT8X9LMZGGsdC28",
        },
      });
    },
  };
});

describe("SignUpFormComponent", () => {
  it("sends a signup request when the sign up button is clicked", () => {
    const store = mockStore(initialState);
    render(
      <Provider store={store}>
        <SignUpFormComponent />
      </Provider>
    );

    const emailInput = screen.getByLabelText("Email address");
    userEvent.type(emailInput, "test@example.com");

    const passwordInput = screen.getByLabelText("Password");
    userEvent.type(passwordInput, "password");

    screen.debug();

    const submitButton = screen.queryByText("Submit");

    fireEvent.click(submitButton);

    const actions = store.getActions();
    console.log(actions);
    console.log(store.getState());
  });
});

如果我调试测试并在thunk中设置一个断点，我实际上可以看到有效负载并一直走到返回，因此这似乎表明它正在工作

---

此时，我不确定自己做错了什么，但我希望在模拟商店的

getActions

中看到已完成的操作，并希望看到使用有效负载调用的挂起操作。

createAsynchThunk

始终异步工作，而您的测试是同步的。

已完成

操作将在一两分钟后发出，但此时您的测试已经结束

使其异步并等待片刻

description（“SignUpFormComponent”，（）=>{
它（“单击注册按钮时发送注册请求”，async（）=>{
// ...
fireEvent.单击（提交按钮）；
等待新承诺（resolve=>setTimeout（resolve，5））
const actions=store.getActions（）；
控制台日志（操作）；
log（store.getState（））；
});
});

---

我相信有比这更好的方法，但这应该向您展示基本概念。

啊，当然。谢谢你的回答。即使它没有一个精确的解决方案，你也为我指明了正确的方向。如果我比别人先想出一个解决方案，我会把它作为答案贴出来。

    console.log
      [
        {
          type: 'auth/signup/pending',
          payload: undefined,
          meta: {
            arg: [Object],
            requestId: 'LFcG3HN8lL2aIf_4RMsq9',
            requestStatus: 'pending'
          }
        }
      ]

      at Object.<anonymous> (src/components/signup-form/index.test.js:77:13)

    console.log
      { auth: { token: null, email: null, status: 'idle' } }

      at Object.<anonymous> (src/components/signup-form/index.test.js:78:13)

  const [registration, setRegistration] = useState({
    email: "",
    password: "",
  });

  const dispatch = useDispatch();

  const onSubmit = () => {
    dispatch(signup(registration));
  };