Jest 中对 Redux 异步操作的测试

在前端开发中，Redux 是常用的数据管理工具之一。Redux 可以处理异步操作，但案例调试过程中常常会出现一些问题。本篇文章将会介绍如何使用 Jest 对 Redux 异步操作进行测试。以下是详细的指导和示例代码。

关于 Jest

Jest 是一个由 Facebook 开发的测试框架，主要用于 JavaScript 测试。它具有快速、可靠和并发执行的特点，使得 Jest 成为前端开发中测试代码的不二之选。

目标

我们的目标是为了确保异步操作可以在 Redux 中正常启动，触发相对应的 actions 以及更新 Reducer 中的数据。

准备工作

首先，我们需要先安装一些必要的库：

npm install --save-dev jest redux-mock-store redux-thunk

• Jest：测试框架；
• redux-mock-store：创建可接受 redux 存储参数的模拟 store；
• redux-thunk：用于处理 redux 中的异步操作。

接下来，让我们来创建一些基本的代码以及测试。

样例代码

以下是一个很基本的 Redux 操作。

Action 文件

// javascriptcn.com 代码示例
import axios from "axios";

export const GET_PRODUCTS_REQUEST = "GET_PRODUCTS_REQUEST";
export const GET_PRODUCTS_SUCCESS = "GET_PRODUCTS_SUCCESS";
export const GET_PRODUCTS_FAILURE = "GET_PRODUCTS_FAILURE";

const fetchProductsRequest = () => ({
  type: GET_PRODUCTS_REQUEST
});

const fetchProductsSuccess = (data) => ({
  type: GET_PRODUCTS_SUCCESS,
  data
});

const fetchProductsFailure = (error) => ({
  type: GET_PRODUCTS_FAILURE,
  error
});

export const fetchProducts = () => (dispatch) => {
  dispatch(fetchProductsRequest());
  return axios.get("https://jsonplaceholder.typicode.com/posts").then(
    (response) => {
      dispatch(fetchProductsSuccess(response.data));
    },
    (error) => {
      dispatch(fetchProductsFailure(error));
    }
  );
};

Reducer 文件

// javascriptcn.com 代码示例
import {
  GET_PRODUCTS_REQUEST,
  GET_PRODUCTS_SUCCESS,
  GET_PRODUCTS_FAILURE
} from "../actions/products";

const initialState = {
  loading: false,
  data: [],
  error: null
};

const productsReducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_PRODUCTS_REQUEST:
      return {
        ...state,
        loading: true
      };
    case GET_PRODUCTS_SUCCESS:
      return {
        ...state,
        loading: false,
        data: action.data
      };
    case GET_PRODUCTS_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.error
      };
    default:
      return state;
  }
};

export default productsReducer;

现在我们来测试异步操作。以下是测试代码。

单元测试代码

// javascriptcn.com 代码示例
import configureMockStore from "redux-mock-store";
import thunk from "redux-thunk";

import {
  GET_PRODUCTS_REQUEST,
  GET_PRODUCTS_SUCCESS,
  GET_PRODUCTS_FAILURE,
  fetchProducts
} from "../../actions/products";

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

describe("Async Product Fetch", () => {
  it("fetches products from server and dispatches success action", () => {
    const store = mockStore();
    const products = [{ id: 1, name: "Product 1" }];
    const expectedActions = [
      { type: GET_PRODUCTS_REQUEST },
      { type: GET_PRODUCTS_SUCCESS, data: products }
    ];

    axios.get.mockImplementationOnce(() =>
      Promise.resolve({ data: products })
    );

    return store.dispatch(fetchProducts()).then(() => {
      expect(store.getActions()).toEqual(expectedActions);
    });
  });

  it("should create a GET_PRODUCTS_FAILURE action", () => {
    const store = mockStore();
    const error = "Error";
    const expectedActionTypes = [
       { type: GET_PRODUCTS_REQUEST },
       { type: GET_PRODUCTS_FAILURE, error }
     ];
    axios.get.mockImplementationOnce(() =>
      Promise.reject({ error: error })
    );

    return store.dispatch(fetchProducts()).catch(() => {
      expect(store.getActions()).toEqual(expectedActionTypes);
    });
  });
});

上述代码中第一个 it 语句测试了正常响应，并且成功获得期望的数据。第二个 it 语句测试了错误响应，即无响应或错误信息。

总结

本文主要介绍了如何使用 Jest 对 Redux 中的异步操作进行测试。这些测试可以确保异步代码能够正常执行并更新我们期望的状态。Jest 通过具有速度、可靠性和并发执行等特点，成为社区中流行的测试框架，能够帮助开发人员更快、更有效地编写和运行测试用例。

更多资源

• Jest
• redux-mock-store
• redux-thunk

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6583a49ed2f5e1655de7c80b