如何使用 Enzyme 和 Jest 对 Redux 异步操作进行测试-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，测试是非常重要的一环。Redux 是一个非常流行的状态管理工具，但是 Redux 的异步操作测试比较复杂。本文将介绍如何使用 Enzyme 和 Jest 对 Redux 异步操作进行测试。

Enzyme 和 Jest 简介

Enzyme 是一个 React 组件测试工具，它提供了一些简单易用的 API 用于模拟 React 组件的渲染和交互。Jest 是一个基于 Jasmine 的 JavaScript 测试框架，它提供了一些便捷的 API 用于编写测试用例。

Redux 异步操作的测试

Redux 异步操作通常是通过中间件实现的，比如 Redux Thunk、Redux Saga 等。这些中间件可以让我们在 Redux 中处理异步操作，并且将异步操作的结果以 action 的形式返回给 Redux。

我们需要测试的是异步操作的结果，也就是 action。因为异步操作需要一定的时间才能完成，所以我们需要使用 Jest 提供的异步测试 API。

下面是一个简单的 Redux 异步操作的例子：

// javascriptcn.com 代码示例
// actions.js
export const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
export const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';

export const fetchDataRequest = () => ({
  type: FETCH_DATA_REQUEST
});

export const fetchDataSuccess = data => ({
  type: FETCH_DATA_SUCCESS,
  payload: data
});

export const fetchDataFailure = error => ({
  type: FETCH_DATA_FAILURE,
  payload: error
});

export const fetchData = () => dispatch => {
  dispatch(fetchDataRequest());
  return fetch('/api/data')
    .then(response => response.json())
    .then(data => dispatch(fetchDataSuccess(data)))
    .catch(error => dispatch(fetchDataFailure(error)));
};

这个例子中，fetchData 函数是一个异步操作，它会向服务器请求数据，并将数据以 action 的形式返回给 Redux。我们需要测试的是 fetchData 函数返回的 action 是否正确。

编写测试用例

首先，我们需要安装 Enzyme 和 Jest：

npm install enzyme jest --save-dev

然后，我们可以编写测试用例：

// javascriptcn.com 代码示例
// actions.test.js
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import fetchMock from 'fetch-mock';
import {
  FETCH_DATA_REQUEST,
  FETCH_DATA_SUCCESS,
  FETCH_DATA_FAILURE,
  fetchData
} from './actions';

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

describe('fetchData', () => {
  afterEach(() => {
    fetchMock.restore();
  });

  it('creates FETCH_DATA_SUCCESS when fetching data has been done', () => {
    fetchMock.getOnce('/api/data', {
      body: { data: ['data'] },
      headers: { 'content-type': 'application/json' }
    });

    const expectedActions = [
      { type: FETCH_DATA_REQUEST },
      { type: FETCH_DATA_SUCCESS, payload: { data: ['data'] } }
    ];
    const store = mockStore({});

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

在这个测试用例中，我们首先模拟了服务器返回的数据，然后创建了一个 mock store，并使用 store.dispatch 调用 fetchData 函数。最后，我们使用 expect 断言函数判断 store.getActions() 返回的 action 是否和我们预期的一致。

总结

使用 Enzyme 和 Jest 可以轻松地测试 Redux 异步操作。我们可以使用 fetch-mock 模拟服务器返回的数据，并使用 redux-mock-store 创建一个 mock store。最后，我们可以使用异步测试 API 确保异步操作的结果正确。

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