如何在 Jest 中测试 redux-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Redux 是一种流行的状态管理库。它使开发人员可以轻松地管理应用程序的状态，并进行可预测的状态更改。然而，在开发应用程序时，需要确保 Redux 工作正常并且代码覆盖率高。对于这些目的，我们可以使用 Jest 测试库。

在本文中，我们将学习如何使用 Jest 来测试 Redux。我们将深入了解基本的 Redux 概念，讨论 Jest 中的测试工具和扩展 Redux 测试的方法。本文假定您已掌握了 Redux 的基础知识以及如何使用 Jest 进行测试的基础知识。

基本概念

Store

一个 Redux 应用程序的核心是它的 store。store 是一个状态容器，它管理着应用程序的状态，并允许我们发布和订阅状态更改事件。我们将使用 Jest 来测试我们的应用程序与 store 交互的方式。

Action

Action 是一个简单的 JavaScript 对象，它描述了发生的事件及其相关数据。我们使用 Action 来指示 Redux 更改 store 的状态。在测试 Redux 应用程序时，我们将测试 Action 触发对 store 的正确反应。

Reducer

Reducer 是一个纯函数，它接受当前状态和一个 Action，并返回一个新状态。Reducer 定义了应用程序状态的更改方式。在测试应用程序时，我们将测试应用程序的 reducer 是否正确响应 action。

测试工具

Enzyme

Enzyme 是一个用于 React 应用程序的 JavaScript 测试实用程序。它提供了一些友好的 API，允许我们轻松地与 React 组件进行交互，并方便地测试它们的行为。在测试 Redux 应用程序时，Enzyme 可以用于测试 React 组件和 Redux Store 交互。

redux-mock-store

redux-mock-store 是一个允许我们轻松创建和控制 Redux Store 的工具。在测试 Redux 应用程序时，它可以帮助我们模拟 store 的行为以及测试它与 Action 的交互。

编写测试

测试 Action

我们可以使用 Jest 来测试 Action 的创建。考虑以下 Counter 应用程序。在该应用程序中，我们有一个计数器，我们可以增加或减少。我们可以使用 Jest 来测试我们的应用程序是否正确触发 Action。这是如何做的：

import { incrementCounter, decrementCounter } from '../actions';

describe('actions', () => {
  it('should create an action to increment the counter', () => {
    const expectedAction = { type: 'INCREMENT_COUNTER' };
    expect(incrementCounter()).toEqual(expectedAction);
  });

  it('should create an action to decrement the counter', () => {
    const expectedAction = { type: 'DECREMENT_COUNTER' };
    expect(decrementCounter()).toEqual(expectedAction);
  });
});

测试 Reducer

我们可以编写测试用例来测试 reducer 是否正确响应 action。

import counterReducer from '../reducers/counter';
import { incrementCounter, decrementCounter } from '../actions';

describe('counter reducer', () => {
  it('should return the initial state', () => {
    expect(counterReducer(undefined, {})).toEqual({ value: 0 });
  });

  it('should handle INCREMENT_COUNTER', () => {
    expect(
      counterReducer(
        { value: 0 },
        {
          type: 'INCREMENT_COUNTER',
        }
      )
    ).toEqual({
      value: 1,
    });
  });

  it('should handle DECREMENT_COUNTER', () => {
    expect(
      counterReducer(
        { value: 1 },
        {
          type: 'DECREMENT_COUNTER',
        }
      )
    ).toEqual({
      value: 0,
    });
  });
});

测试 Store

最后，我们使用 redux-mock-store 来模拟 store 并测试我们的应用程序逻辑。

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { incrementCounter, decrementCounter } from '../actions';

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

describe('async actions', () => {
  it('should dispatch incrementCounter', () => {
    const expectedActions = [
      {
        type: 'INCREMENT_COUNTER',
      },
    ];
    const store = mockStore({});

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

  it('should dispatch decrementCounter', () => {
    const expectedActions = [
      {
        type: 'DECREMENT_COUNTER',
      },
    ];
    const store = mockStore({});

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

总结

Jest 是一个功能强大的测试库，它可以帮助我们测试 Redux 应用程序。本文深入了解了 Redux 中的核心概念，讨论了用于测试 Redux 应用程序的常用工具和技术，并提供了示例代码。我们希望这篇文章能够帮助您开始编写更好，更健壮的 Redux 应用程序。

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