基于 Jest 测试 React 组件以及 Redux 异步代码剖析-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，测试是一个非常重要的环节。测试可以保证代码的质量，提高代码的可维护性和可读性。Jest 是 Facebook 开源的一个 JavaScript 测试框架，它非常适合用于测试 React 组件和 Redux 异步代码。本文将详细介绍如何使用 Jest 测试 React 组件和 Redux 异步代码。本文假设读者已经了解 React 和 Redux 的基本概念。

测试 React 组件

安装 Jest

首先，我们需要安装 Jest。可以使用 npm 或 yarn 进行安装：

npm install --save-dev jest

或者

yarn add --dev jest

编写测试用例

在编写测试用例之前，我们需要安装 enzyme，它是一个 React 组件测试工具。可以使用 npm 或 yarn 进行安装：

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

或者

yarn add --dev enzyme enzyme-adapter-react-16

然后，我们需要配置 enzyme。在项目的根目录下创建一个 setupTests.js 文件，添加以下内容：

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

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

现在，我们可以编写测试用例了。假设我们有一个简单的计数器组件，代码如下：

// javascriptcn.com 代码示例
import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  decrement = () => {
    this.setState((prevState) => ({
      count: prevState.count - 1,
    }));
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    );
  }
}

export default Counter;

我们需要编写测试用例来测试这个组件。在项目的根目录下创建一个 __tests__ 目录，然后在该目录下创建一个 Counter.test.js 文件，添加以下内容：

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

describe('Counter', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<Counter />);
    expect(wrapper).toMatchSnapshot();
  });

  it('increments count when + button is clicked', () => {
    const wrapper = shallow(<Counter />);
    const plusButton = wrapper.find('button').at(0);
    plusButton.simulate('click');
    expect(wrapper.state('count')).toBe(1);
  });

  it('decrements count when - button is clicked', () => {
    const wrapper = shallow(<Counter />);
    const minusButton = wrapper.find('button').at(1);
    minusButton.simulate('click');
    expect(wrapper.state('count')).toBe(-1);
  });
});

这些测试用例测试了组件的渲染、增加计数和减少计数功能。我们可以使用 npm test 或 yarn test 命令来运行测试。

测试 Redux 异步代码

在 Redux 中，异步代码通常使用 Redux Thunk 或 Redux Saga 进行管理。我们将介绍如何使用 Jest 测试这些异步代码。

首先，我们需要安装 redux、react-redux、redux-thunk 和 redux-saga。可以使用 npm 或 yarn 进行安装：

npm install --save redux react-redux redux-thunk redux-saga

或者

yarn add redux react-redux redux-thunk redux-saga

我们将使用一个简单的 Redux 应用程序来说明如何测试异步代码。假设我们有一个 counter 模块，代码如下：

// javascriptcn.com 代码示例
// actions.js
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

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

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

// reducers.js
import { INCREMENT, DECREMENT } from './actions';

const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        count: state.count + 1,
      };
    case DECREMENT:
      return {
        count: state.count - 1,
      };
    default:
      return state;
  }
};

export default counterReducer;

// thunks.js
import { increment, decrement } from './actions';

export const incrementAsync = () => (dispatch) => {
  setTimeout(() => {
    dispatch(increment());
  }, 1000);
};

export const decrementAsync = () => (dispatch) => {
  setTimeout(() => {
    dispatch(decrement());
  }, 1000);
};

我们需要编写测试用例来测试 incrementAsync 和 decrementAsync 函数。在项目的根目录下创建一个 __tests__ 目录，然后在该目录下创建一个 thunks.test.js 文件，添加以下内容：

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

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

jest.useFakeTimers();

describe('thunks', () => {
  it('increments count after 1 second', () => {
    const store = mockStore({ count: 0 });
    store.dispatch(thunks.incrementAsync());
    jest.runAllTimers();
    expect(store.getActions()).toEqual([actions.increment()]);
  });

  it('decrements count after 1 second', () => {
    const store = mockStore({ count: 0 });
    store.dispatch(thunks.decrementAsync());
    jest.runAllTimers();
    expect(store.getActions()).toEqual([actions.decrement()]);
  });
});

这些测试用例测试了异步代码的增加计数和减少计数功能。我们可以使用 npm test 或 yarn test 命令来运行测试。

总结

本文详细介绍了如何使用 Jest 测试 React 组件和 Redux 异步代码。测试是保证代码质量的重要手段，希望本文能对读者有所帮助。完整示例代码可以在本文的 GitHub 仓库中找到：https://github.com/example/jest-react-redux-testing。

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