使用 Jest 测试 Redux 中的异步 action-JavaScript中文网-JavaScript教程资源分享门户

使用 Jest 测试 Redux 中的异步 action

Redux 是一个流行的 JavaScript 应用程序状态管理库，它可以协调应用程序中的数据流，并使数据状态的更改可预测。在 Redux 中，异步 action 不是很常见，但在某些情况下，例如处理 API 请求时，你需要使用异步 action。在这篇文章中，我们将看一下如何使用 Jest 测试 Redux 中的异步 action。

安装和设置

在开始编写测试之前，你需要确保安装了 Jest 和 Redux。你可以使用以下命令安装它们：

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

接下来，你需要为 Redux 的 createStore 函数和 applyMiddleware 函数创建一个 store。这可以通过创建一个名为 store.js 的文件来完成，它应该如下所示：

// javascriptcn.com 代码示例
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

export default store;

在这个示例中，我们使用了 combineReducer 来将多个 reducer 合并到一个 rootReducer 中，然后将其传递给 createStore 函数。我们还使用了 applyMiddleware 函数来将 redux-thunk 中间件应用于 store。

编写异步 action

异步 action 是 Redux 中处理异步操作的一种方式。它们由 Redux-thunk 中间件提供支持。为了编写一个异步 action，你需要编写一个返回一个函数的 action 创建函数。在这个函数中，你可以执行任何异步操作，并在完成时调度一个普通的 action。

让我们看一个示例。假设我们的应用需要获取远程服务器上的用户列表。我们可以编写以下异步 action：

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

export const GET_USERS = 'GET_USERS';

export function getUsers() {
  return dispatch => {
    axios.get('/api/users')
      .then(response => {
        dispatch({ type: GET_USERS, payload: response.data });
      });
  };
}

在这个示例中，我们使用 axios 库来执行 HTTP GET 请求。在请求成功时，我们使用 dispatch 函数调度一个普通的 action。这个 action 包含了来自服务器的用户列表数据。

编写测试

现在我们已经编写好了 Redux 的异步 action，让我们来编写测试。在测试之前，我们需要安装一个名为 redux-mock-store 的库。这个库将为我们提供一个模拟 store，我们可以使用它来测试异步 action。

你可以使用以下命令安装它：

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

现在，在编写测试之前，我们需要先编写一些辅助函数来测试异步 action。下面是一些常用的辅助函数：

// javascriptcn.com 代码示例
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

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

const mockAxios = new MockAdapter(axios);

export { mockStore, mockAxios };

在这个示例中，我们使用了 redux-mock-store 库来创建一个模拟 store。我们还使用了 axios-mock-adapter 库来模拟 axios 库的请求。

现在，我们可以编写我们的测试。以下是一个测试可以测试异步 action 是否能够正确地调度一个普通的 action：

// javascriptcn.com 代码示例
import { getUsers } from './actions';
import { mockAxios, mockStore } from './testUtils';

describe('getUsers', () => {
  it('dispatches the GET_USERS action', () => {
    const responseData = [{ name: 'John' }, { name: 'Jane' }];
    mockAxios.onGet('/api/users').reply(200, responseData);
    const expectedAction = [{ type: 'GET_USERS', payload: responseData }];
    const store = mockStore({});
    return store.dispatch(getUsers())
      .then(() => {
        expect(store.getActions()).toEqual(expectedAction);
      });
  });
});

在这个测试中，我们首先模拟了一个 GET 请求，然后使用模拟 store 和异步 action 来测试我们的代码是否正确地调度 action。

总结

在本文中，我们解释了如何使用 Jest 和 redux-mock-store 库测试 Redux 中的异步 action。我们还介绍了一些常用的辅助函数和方法，这些函数和方法可以帮助你编写更好的测试。

本文提供了详细的代码示例和演示，您可以使用它们来测试您自己的 Redux 应用程序中的异步 action。让我们继续保持诚实和谨慎测试！

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