使用 Enzyme 和 Jest 手动模拟 Redux 动作-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一个流行的用于构建 JavaScript 应用程序的状态管理库。在前端开发中，Redux 提供了一种方便的方式来管理状态，并使组件之间的通信变得更加容易。 Enzyme 和 Jest 则是流行的前端测试工具，它们可以帮助我们在开发过程中验证我们的代码是否按预期工作。在本篇文章中，我们将介绍如何使用 Enzyme 和 Jest 来手动模拟 Redux 动作。

Redux 模式

在介绍如何手动模拟 Redux 动作之前，让我们先来了解一下 Redux 模式。Redux 的核心概念是“store”，它是一个对象，它包含了全局状态树。你可以使用“action”去描述对这个状态树的更改，然后使用“reducer”来实际处理这些更改。最后，Redux 会将更新后的状态传递给应用程序中的所有相关组件。

为了手动模拟 Redux 动作，我们将需要使用 Enzyme 和 Jest 以及一些其他的工具。我们将需要一个 Redux store，一个 action，一个 reducer 和一些组件来理解如何使用这些工具一起工作。下面我们将分别介绍这些概念及其实现。

创建 Redux Store

在 Enzyme 和 Jest 中手动模拟 Redux 动作之前，我们需要创建一个 Redux store。下面是一个简单的 store 的代码例子：

// javascriptcn.com 代码示例
import { createStore } from 'redux';

const reducer = (state = { value: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        value: state.value + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        value: state.value - 1,
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

上述代码中的 reducer 函数将接收当前的状态和一个 action 对象，当调用 dispatch(action) 时，reducer 函数将解释 action 并返回新的状态。我们可以使用 createStore 来创建一个 Redux store。

创建 Action

接下来，我们需要创建一个 action，它是一个对象，用于描述 Redux store 中发生的更改。我们可以使用 createAction 函数来创建这个 action 对象。下面是 createAction 的代码示例：

export const incrementCounter = () => ({
  type: 'INCREMENT',
});

export const decrementCounter = () => ({
  type: 'DECREMENT',
});

上述代码中，我们可以创建两个函数，一个用于增加计数器，一个用于减少计数器。这两个函数都会返回一个简单的对象，其中包含了一个 type 属性来描述这个 action。

创建 Reducer

我们还需要一个 reducer 函数，它用于处理 action 并返回新的 state。上面我们已经创建了一个 reducer 函数，可以使用这个函数作为我们模拟 action 的处理程序。

创建组件

我们还需要创建一些组件来检查我们的 action 是否按预期工作。我们将创建两个组件：一个 Counter 组件，它将显示当前的计数器值，还有一个组件，它将调用 incrementCounter 和 decrementCounter 函数，以使 Counter 组件在点击按钮时增加或减少计数器值。

// javascriptcn.com 代码示例
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { incrementCounter, decrementCounter } from './actions';

const Counter = () => {
  const value = useSelector((state) => state.value);
  const dispatch = useDispatch();

  return (
    <>
      <h2>Current Value: {value}</h2>
      <button onClick={() => dispatch(incrementCounter())}>+</button>
      <button onClick={() => dispatch(decrementCounter())}>-</button>
    </>
  );
};

export default Counter;

上述代码为 Counter 组件，它将从 Redux store 中获取当前的值，并显示在页面上。还有两个按钮可以通过调用 dispatch 函数来增加或减少计数器的值。

编写测试用例

现在，我们有了一个简单的计数器应用程序，并且已经创建了一个 Redux store、一个 action 和一个 reducer。接下来，我们需要编写一些测试用例来描述我们的 action 是否按预期工作。

// javascriptcn.com 代码示例
import React from 'react';
import { mount } from 'enzyme';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

it('increments the counter correctly', () => {
  const wrapper = mount(
    <Provider store={store}>
      <Counter />
    </Provider>
  );

  wrapper.find('button').at(0).simulate('click');
  expect(wrapper.find('h2').text()).toEqual('Current Value: 1');
});

it('decrements the counter correctly', () => {
  const wrapper = mount(
    <Provider store={store}>
      <Counter />
    </Provider>
  );

  wrapper.find('button').at(1).simulate('click');
  expect(wrapper.find('h2').text()).toEqual('Current Value: -1');
});

上述代码为两个测试用例，它们将 mount Counter 组件并模拟点击“+”和“-”按钮。我们还使用 Enzyme 的 find() 函数来查找对应的元素，并使用 Jest 的 expect() 函数来测试 Counter 组件是否按预期工作。

总结

在这篇文章中，我们介绍了如何使用 Enzyme 和 Jest 手动模拟 Redux 动作。我们创建了一个 Redux store、一个 action 和一个 reducer，并且还创建了一个可以增加或减少计数器值的组件。通过编写测试用例，我们可以验证我们的代码是否按预期工作。这种手动模拟 Redux 动作的方法可以帮助我们更好地理解 Redux 的工作原理，并帮助我们编写更高质量的代码。

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