Enzyme 中如何测试经过 Redux 包裹的组件？-JavaScript中文网-JavaScript教程资源分享门户

Enzyme 中如何测试经过 Redux 包裹的组件？

在 React 开发中，我们通常使用 Redux 进行状态管理。而在测试前端组件时，我们可以使用 Enzyme 来测试这些被 Redux 包裹的组件。

Enzyme 是 React 测试工具箱中的一员，在 React 应用中提供了一个方便的 API，可以让我们轻松地模拟组件的行为和渲染结果。Enzyme 也支持对经过 Redux 包裹的组件进行测试。

下面我们来介绍如何使用 Enzyme 测试经过 Redux 包裹的组件。

安装 Enzyme

首先，我们需要安装 Enzyme。可以使用 npm 或者 yarn 进行安装，如下所示：

npm install --save-dev enzyme enzyme-adapter-react-xx

其中，xx 代表对应的 React 版本。比如，对于 React 16，我们需要安装 enzyme-adapter-react-16。

配置 Enzyme

安装完成后，我们需要在项目中设置 Enzyme 以使用适当的适配器来连接 React。可以在 src/setupTests.js 文件中进行设置，如下所示：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });

这将使 Enzyme 使用 react-16 适配器来连接 React。

编写测试代码

有了 Enzyme 和适配器的设置，在测试中就可以使用 Enzyme 提供的 API 来测试 React 组件。

下面我们来看一下如何测试一个经过 Redux 包裹的组件。假设该组件为一个计数器，可以增加、减少计数值。我们首先需要创建一个 Redux Store，为该组件提供状态以及 action。

// javascriptcn.com 代码示例
// Counter.jsx
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from 'path/to/actions';

class Counter extends React.Component {
  render() {
    const { count, increment, decrement } = this.props;
    return (
      <div>
        <h2>Count: {count}</h2>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  count: state.count,
});

const mapDispatchToProps = {
  increment,
  decrement,
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

// actions.js
export const increment = () => ({
  type: 'INCREMENT',
});

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

// javascriptcn.com 代码示例
// reducers.js
const initialState = {
  count: 0,
};

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
}

接下来，我们就可以编写测试代码了。使用 Enzyme 的 shallow 方法来浅渲染组件，并使用 Jest 来进行断言。

// javascriptcn.com 代码示例
// Counter.test.jsx
import React from 'react';
import { Provider } from 'react-redux';
import { shallow } from 'enzyme';
import Counter from 'path/to/Counter';
import configureStore from 'path/to/store';

describe('<Counter />', () => {
  let store;
  let wrapper;
  beforeEach(() => {
    store = configureStore({ count: 0 });
    wrapper = shallow(
      <Provider store={store}>
        <Counter />
      </Provider>
    ).dive();
  });
  it('renders count', () => {
    expect(wrapper.find('h2').text()).toBe('Count: 0');
  });
  it('increments count', () => {
    wrapper.find('button').at(0).simulate('click');
    expect(wrapper.find('h2').text()).toBe('Count: 1');
  });
  it('decrements count', () => {
    wrapper.find('button').at(1).simulate('click');
    expect(wrapper.find('h2').text()).toBe('Count: -1');
  });
});

在测试代码中，我们使用 shallow 方法浅渲染组件，并用 Provider 包裹，将 Redux Store 传入组件。

在各个测试用例中，我们模拟用户在点击按钮后的行为，然后断言组件的渲染结果是否符合预期。

运行测试

最后，我们使用 Jest 来运行测试。运行测试前，需要在 package.json 文件中添加以下代码：

{
  "jest": {
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ]
  }
}

然后，在终端中输入 npm test 或者 yarn test，就可以运行测试了。如果测试通过，将会在终端中看到绿色的提示。

总结

本文介绍了如何使用 Enzyme 来测试经过 Redux 包裹的组件。我们需要先安装和配置 Enzyme，使用 shallow 方法浅渲染组件，并使用 Provider 将 Redux Store 传入组件。最后，使用 Jest 进行测试，并断言组件的渲染结果是否符合预期。

测试对于前端开发来说非常重要，它可以帮助我们发现问题，提高代码质量。Enzyme 提供了非常方便的 API，可以帮助我们测试各种类型的 React 组件。希望本文可以帮助您更好地使用 Enzyme 来测试经过 Redux 包裹的组件。

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