Блог

У меня возникли некоторые проблемы с тестированием некоторого кода, который полагается на асинхронный блок.

Вот мой ответ:

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

В моем выводе я вижу следующее:

     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)
 

Однако, если я попытаюсь сам запустить поток через браузер, он работает нормально, поэтому я знаю, что, по крайней мере, в браузере действие thunk FULFILLED отправляется.

Компонент отправляет thunk следующим образом:

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

  const dispatch = useDispatch();

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

Если я отлажу тесты и установлю точку останова в блоке, я действительно смогу просмотреть полезную нагрузку и пройти весь путь до возврата, так что, похоже, это указывает на то, что он работает.

На данный момент я не уверен, что я делаю неправильно, но я ожидал бы увидеть выполненное действие в макете хранилища getActions , и я ожидал бы увидеть ожидающее действие, вызываемое с полезной нагрузкой.

createAsyncThunk всегда работает асинхронно, пока ваш тест синхронный. fulfilled Действие будет отправлено на один или два тика позже, но на этом этапе ваш тест уже завершен.

Сделайте его асинхронным и подождите некоторое время.

 describe("SignUpFormComponent", () => {
  it("sends a signup request when the sign up button is clicked", async () => {

// ...

    fireEvent.click(submitButton);

    await new Promise(resolve => setTimeout(resolve, 5))

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

Я уверен, что есть лучшие способы сделать это, чем это, но это должно показать вам основную концепцию.