使用 Enzyme 测试 React 组件中的 Redux 的 state-JavaScript中文网-JavaScript教程资源分享门户

在 React 应用中，Redux 已经成为了管理状态的主流解决方案。为了保证代码的可靠性，我们需要对 Redux 中的 state 进行测试。在本文中，我们将介绍如何使用 Enzyme 来测试 React 组件中的 Redux 的 state，包括如何设置 store、获取和修改 state，以及如何模拟 Redux 的 action。

什么是 Enzyme？

Enzyme 是一个由 Airbnb 开发的 React 组件测试库，它提供了一套简单且易用的 API，用于测试组件的输出、渲染和交互等方面。Enzyme 将 React 组件封装在浅层渲染器（shallow renderer）中，从而使测试变得简单高效。

设置 Redux 的 store

在使用 Enzyme 测试 React 组件中的 Redux 的 state 之前，我们需要先创建一个 Redux 的 store。可以采用 createStore 函数创建一个空的 store，或者使用 Redux 的应用程序状态初始值（initialState）创建 store。在测试文件中，我们可以在 beforeEach 块中创建 store，并将其传递给组件作为属性。以下是一个例子：

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducers';

let store;

beforeEach(() => {
  store = createStore(reducer, {count: 0});
});

describe('Counter component', () => {
  it('renders without crashing', () => {
    const component = shallow(<Provider store={store}><Counter /></Provider>);
    expect(component.exists()).toEqual(true);
  });
  // ...
});

在上面的代码中，我们创建了一个名为 store 的 Redux store，并将其传递给 Counter 组件作为属性。请注意，在创建 store 和渲染组件之前，我们需要在测试用例中包装组件，使用 Provider 包裹组件，并将 store 作为 store 属性的值传递给 Provider 组件。

获取和修改 state

我们可以通过 store 的 getState() 方法来获取当前的 Redux state。在组件的测试中，我们需要获取、修改，甚至模拟 Redux state，以模拟 interaction。以下是一个 Counter 组件的测试用例：

describe('Counter component', () => {
  it('renders without crashing', () => {
    const component = shallow(<Provider store={store}><Counter /></Provider>);
    expect(component.exists()).toEqual(true);
  });

  it('increments the counter', () => {
    const component = shallow(<Provider store={store}><Counter /></Provider>);
    const initialCount = store.getState().count;
    component.find('#increment-button').simulate('click');
    expect(store.getState().count).toEqual(initialCount + 1);
  });

  it('decrements the counter', () => {
    const component = shallow(<Provider store={store}><Counter /></Provider>);
    const initialCount = store.getState().count;
    component.find('#decrement-button').simulate('click');
    expect(store.getState().count).toEqual(initialCount - 1);
  });
});

在上面的代码中，我们模拟了两种场景：counter 增加和 counter 减少。我们首先获取使用 store 的 getState() 方法获取当前的 count 值，然后模拟用户点击 increment 或 decrement 按钮，并使用 expect() 方法来测试是否按预期增加或减少了 count 值。

模拟 Redux 的 action

我们还可以使用 Enzyme 来模拟 Redux 的 action，并测试 state 是否按照预期修改。React-Redux 库提供了 shallowWithStore 函数来测试 Redux 中的 action。以下是一个例子：

const props = {
  count: 0,
  increment: jest.fn(),
};

describe('Counter component', () => {
  it('renders without crashing', () => {
    const wrapper = shallow(<Counter {...props} />);
    expect(wrapper.exists()).toEqual(true);
  });

  it('calls increment function when button is clicked', () => {
    const wrapper = shallowWithStore(<Counter {...props} />, store);
    wrapper.find('#increment-button').simulate('click');
    expect(props.increment).toHaveBeenCalledWith(1);
  });
});

在上面的代码中，我们创建了一个带有 increment 函数的 props 对象，并将其作为 Counter 组件的属性传递。然后，我们使用 shallowWithStore 包装 Counter 组件，并模拟用户点击 increment 按钮，验证 increment() 函数是否被调用，以及调用时是否按照预期增加了 count 值。

总结

在本文中，我们介绍了如何使用 Enzyme 来测试 React 组件中的 Redux 的 state，包括如何设置 store、获取和修改 state，以及如何模拟 Redux 的 action。在编写测试代码时，请注意保持测试的简洁性和高效性，并遵循最佳实践，以获得更好的测试覆盖率和可靠性。

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