使用 Enzyme 测试 React Redux 应用的完整指南

Enzyme 是一个测试 React 组件的 JavaScript 库，它由 AirBnB 开源。Enzyme 提供了多种测试工具，可以方便快捷地测试 React 组件的各种场景和用例。在本篇文章中，我们将向您介绍如何使用 Enzyme 测试 React Redux 应用程序。

准备工作

在开始测试 React Redux 应用程序之前，需要先安装 Enzyme 和相应的依赖项。您可以使用以下命令安装它们：

npm i --save-dev enzyme enzyme-adapter-react-16 react-test-renderer

其中，enzyme 是 Enzyme 库的主要包，enzyme-adapter-react-16 是用于 React 16 的适配器，react-test-renderer 是 React 的测试工具。

配置 Adapter

在使用 Enzyme 测试组件之前，需要先配置适配器。下面是一个简单的代码示例：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

测试组件

测试 Redux 连接的组件

在测试 Redux 连接的组件时，我们需要使用 enzyme 的 mount 方法来渲染该组件。在渲染组件之前，需要使用 redux-mock-store 创建一个 mock store。以下是一个简单的代码示例：

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

const mockStore = configureMockStore();
const initialState = { /* ... */ };
const store = mockStore(initialState);

describe('My Connected Component', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = mount(
      <Provider store={store}>
        <MyConnectedComponent />
      </Provider>
    );
  });

  it('should render', () => {
    expect(wrapper.find('.my-connected-component')).toHaveLength(1);
  });

  // ...
});

测试未连接 Redux 的组件

在测试未连接 Redux 的组件时，我们可以使用 shallow 方法来渲染该组件。以下是一个简单的代码示例：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from '../MyComponent';

describe('My Component', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<MyComponent />);
  });

  it('should render', () => {
    expect(wrapper.find('.my-component')).toHaveLength(1);
  });

  // ...
});

测试 Redux Action

在测试 Redux Action 时，我们可以使用 redux-mock-store。下面是一个简单的代码示例：

// javascriptcn.com 代码示例
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import fetchMock from 'fetch-mock';
import * as actions from '../actions';

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

describe('async actions', () => {
  afterEach(() => {
    fetchMock.reset();
    fetchMock.restore();
  });

  it('creates SUCCESS when fetching users has been done', () => {
    fetchMock.getOnce('/users', {
      body: { /* mock response body */ },
      headers: { 'content-type': 'application/json' }
    });

    const expectedActions = [
      { type: actions.REQUEST },
      { type: actions.SUCCESS, data: { /* mock response body */ } }
    ];
    const store = mockStore({});

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

测试 Redux Reducer

在测试 Redux Reducer 时，我们可以使用 Jest 作为测试框架。以下是一个简单的代码示例：

// javascriptcn.com 代码示例
import reducer from '../reducer';
import { REQUEST, SUCCESS, FAILURE } from '../actions';

describe('reducer', () => {
  it('should return the initial state', () => {
    expect(reducer(undefined, {})).toEqual({
      isFetching: false,
      data: null,
      error: null
    });
  });

  it('should handle REQUEST', () => {
    expect(
      reducer([], {
        type: REQUEST
      })
    ).toEqual({
      isFetching: true
    });
  });

  it('should handle SUCCESS', () => {
    expect(
      reducer([], {
        type: SUCCESS,
        data: { /* mock response data */ }
      })
    ).toEqual({
      isFetching: false,
      data: { /* mock response data */ }
    });
  });

  it('should handle FAILURE', () => {
    expect(
      reducer([], {
        type: FAILURE,
        error: { /* mock error message */ }
      })
    ).toEqual({
      isFetching: false,
      error: { /* mock error message */ }
    });
  });
});

总结

本文介绍了如何使用 Enzyme 测试 React Redux 应用程序。涉及了测试 Redux 连接的组件、未连接 Redux 的组件、Redux Action 和 Redux Reducer。希望这篇指南能够帮助您更好地进行前端测试，提高开发质量。

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