如何在 Enzyme 中测试 Redux 的 Provider？-JavaScript中文网-JavaScript教程资源分享门户

如何在 Enzyme 中测试 Redux 的 Provider？

简介

本文将详细介绍如何在 Enzyme 中测试 Redux 的 Provider，以及如何编写相应的测试代码。Redux 是一个流行的数据管理库，React 生态中许多应用程序使用它来简化数据管理和状态管理。Redux 常常与 React 的 Provider 一起使用，Provider 是一个 React 组件，用于将 Redux 的 store 作为 prop 传递给 React 组件树中的所有组件。

当编写 React 应用程序时，测试 React 组件是至关重要的，它可以帮助您确保内容被正确呈现，并且组件能够正确响应客户端交互。当测试涉及 Redux 状态时，我们需要确保它是可测试的，而且测试产生的结果是正确的。在这里，我们将重点介绍如何使用 Enzyme 测试 Redux 的 Provider。

步骤1：安装 Enzyme

首先，你需要安装 Enzyme。Enzyme 是一个流行的 React 测试工具包，可用于测试 React 组件的功能。您可以使用以下命令来安装最新版本的 Enzyme：

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

步骤2：导入和配置 Enzyme

接下来，您需要在 React 中配置 Enzyme。为了实现这一点，您需要导入和配置 Enzyme 适配器。

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

使用 configure() 函数配置适配器，以允许使用 Enzyme 与 React 一起使用。

步骤3：编写测试用例

接下来，我们将编写我们的测试用例来测试 Redux Provider。以下测试用例包括了 Provider 组件的支持，因为 Provider 组件会将 Redux store 隐藏在它的 props 中。

// javascriptcn.com code example
import React from 'react';
import { shallow, mount } from 'enzyme';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import App from './App';

const mockStore = configureMockStore();

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

  beforeEach(() => {
    store = mockStore({
      appState: {
        loading: false,
        error: false,
        data: []
      }
    });

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

  it('should render an App component', () => {
    expect(wrapper).toHaveLength(1);
  });
  it('should render a list of data elements', () => {
    expect(wrapper.find('.data-element')).toHaveLength(3);
  });
});

在上面的测试用例中，我们首先引入了 React 和 Enzyme 的浅层渲染和挂载渲染函数。同时，我们也导入了 Provider 组件，以便我们能够在我们的测试用例中使用 Redux store。

接下来，我们引入了 redux-mock-store 库，这个库将帮助我们创建一个虚拟 Store，以便我们可以在我们的测试用例中使用它。

在控制台中，我们定义了一个名为 appState 的虚拟默认 state，用于在我们的测试用例中使用。

然后，在每个测试用例之前，我们在内存中创建了一个 store 和一个包装器，这样测试用例就可以接收 store 的 props，以便我们能够执行我们的测试。

在第一个测试用例中，我们使用 expect() 函数检查了我们的组件是否已渲染。

在第二个测试用例中，我们确认组件是否呈现了需要的数据数目。

这些测试用例展示了如何使用 Enzyme 来测试 Redux Provider。您可以使用这些模板来测试您自己的组件。

结论

在本文中，我们介绍了如何在 Enzyme 中测试 Redux 的 Provider。通过遵循以上步骤，您可以轻松地测试与 Redux 绑定的 React 组件。我们强烈建议您使用测试驱动开发方法来编写您的测试用例，以确保应用程序的质量。

感谢您的阅读，希望这篇文章能为你带来一些帮助！

示例代码：

// javascriptcn.com code example
// App.js
import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchData } from "./actions";
import "./App.css";

class App extends Component {
  componentDidMount() {
    this.props.fetchData();
  }

  render() {
    const { data, error, loading } = this.props;
    if (loading) {
      return <div>Loading...</div>;
    } else if (error) {
      return <div>Error occurred.</div>;
    } else if (!data.length) {
      return <div>No data</div>;
    } else {
      return (
        <div className="App">
          {this.props.data.map((item) => (
            <div key={item.id} className="data-element">
              {item.title}
            </div>
          ))}
        </div>
      );
    }
  }
}

const mapStateToProps = (state) => ({
  data: state.appState.data,
  loading: state.appState.loading,
  error: state.appState.error,
});

const mapDispatchToProps = {
  fetchData,
};

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

// javascriptcn.com code example
// actions.js
import axios from "axios";

export const FETCH_DATA_BEGIN = "FETCH_DATA_BEGIN";
export const FETCH_DATA_SUCCESS = "FETCH_DATA_SUCCESS";
export const FETCH_DATA_FAILURE = "FETCH_DATA_FAILURE";

export const fetchDataBegin = () => ({
  type: FETCH_DATA_BEGIN,
});

export const fetchDataSuccess = (data) => ({
  type: FETCH_DATA_SUCCESS,
  payload: data,
});

export const fetchDataFailure = (error) => ({
  type: FETCH_DATA_FAILURE,
  payload: error,
});

export const fetchData = () => {
  return (dispatch) => {
    dispatch(fetchDataBegin());

    return axios
      .get("https://jsonplaceholder.typicode.com/todos?_limit=3")
      .then((response) => {
        dispatch(fetchDataSuccess(response.data));
      })
      .catch((error) => {
        dispatch(fetchDataFailure(error));
      });
  };
};

// javascriptcn.com code example
// reducers.js
import {
  FETCH_DATA_BEGIN,
  FETCH_DATA_SUCCESS,
  FETCH_DATA_FAILURE,
} from "./actions";

const initialState = {
  data: [],
  loading: false,
  error: false,
};

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_DATA_BEGIN:
      return {
        ...state,
        loading: true,
        error: false,
      };
    case FETCH_DATA_SUCCESS:
      return {
        ...state,
        data: action.payload,
        loading: false,
        error: false,
      };
    case FETCH_DATA_FAILURE:
      return {
        ...state,
        data: [],
        loading: false,
        error: true,
      };
    default:
      return state;
  }
};

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67375342317fbffedf099f94