React + Jest + Enzyme 单元测试-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，单元测试是不可或缺的一环。React 是一个流行的前端框架，而 Jest 和 Enzyme 是针对 React 的单元测试工具。本文将介绍如何使用 React、Jest 和 Enzyme 进行单元测试，包括测试 React 组件的状态、Props 和事件。

安装和配置

首先，需要安装 Jest 和 Enzyme。可以使用 npm 或 yarn 安装，如下所示：

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

或者

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

Jest 和 Enzyme 都需要配置，可以在项目根目录下创建一个 jest.config.js 文件，并添加以下内容：

module.exports = {
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '\\.(css|less)$': 'identity-obj-proxy',
  },
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
};

其中，testEnvironment 指定了测试环境为 jsdom，moduleNameMapper 指定了 CSS 文件的处理方式，setupFilesAfterEnv 指定了测试文件执行前需要运行的文件。在项目根目录下创建一个 src/setupTests.js 文件，并添加以下内容：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

这个文件用于配置 Enzyme 的适配器。

测试组件状态

首先，我们来测试一个简单的 React 组件的状态。假设我们有一个 Counter 组件，用于显示一个计数器和两个按钮，其中一个按钮用于增加计数器的值，另一个按钮用于减少计数器的值。组件的代码如下：

// javascriptcn.com 代码示例
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
}

export default Counter;

我们可以使用 Enzyme 的 shallow 方法来测试组件的状态。首先，在测试文件中导入 Counter 组件和 shallow 方法：

import React from 'react';
import { shallow } from 'enzyme';
import Counter from './Counter';

然后，编写测试代码：

// javascriptcn.com 代码示例
describe('Counter component', () => {
  it('should start with count 0', () => {
    const wrapper = shallow(<Counter />);
    const countText = wrapper.find('p').text();
    expect(countText).toEqual('Count: 0');
  });

  it('should increment count when clicking + button', () => {
    const wrapper = shallow(<Counter />);
    const incrementButton = wrapper.find('button').at(0);
    incrementButton.simulate('click');
    const countText = wrapper.find('p').text();
    expect(countText).toEqual('Count: 1');
  });

  it('should decrement count when clicking - button', () => {
    const wrapper = shallow(<Counter />);
    const decrementButton = wrapper.find('button').at(1);
    decrementButton.simulate('click');
    const countText = wrapper.find('p').text();
    expect(countText).toEqual('Count: -1');
  });
});

在第一个测试中，我们断言组件的初始状态为 0。在第二个测试中，我们模拟用户点击 + 按钮并断言计数器的值是否增加了。在第三个测试中，我们模拟用户点击 - 按钮并断言计数器的值是否减少了。

测试组件 Props

接下来，我们来测试组件的 Props。假设我们有一个 UserInfo 组件，用于显示用户的信息，包括姓名、年龄和性别。组件的代码如下：

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

function UserInfo(props) {
  const { name, age, gender } = props;

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Gender: {gender}</p>
    </div>
  );
}

export default UserInfo;

我们可以使用 Enzyme 的 shallow 方法来测试组件的 Props。首先，在测试文件中导入 UserInfo 组件和 shallow 方法：

import React from 'react';
import { shallow } from 'enzyme';
import UserInfo from './UserInfo';

然后，编写测试代码：

// javascriptcn.com 代码示例
describe('UserInfo component', () => {
  it('should display user info correctly', () => {
    const wrapper = shallow(<UserInfo name="Tom" age={18} gender="Male" />);
    const nameText = wrapper.find('p').at(0).text();
    const ageText = wrapper.find('p').at(1).text();
    const genderText = wrapper.find('p').at(2).text();
    expect(nameText).toEqual('Name: Tom');
    expect(ageText).toEqual('Age: 18');
    expect(genderText).toEqual('Gender: Male');
  });
});

在这个测试中，我们断言组件渲染后是否正确显示了传入的 Props。

测试组件事件

最后，我们来测试组件的事件。假设我们有一个 LoginForm 组件，用于用户登录，包括用户名和密码两个输入框和一个登录按钮。组件的代码如下：

// javascriptcn.com 代码示例
import React, { useState } from 'react';

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Username: ${username}, Password: ${password}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Username:
          <input type="text" value={username} onChange={handleUsernameChange} />
        </label>
      </div>
      <div>
        <label>
          Password:
          <input type="password" value={password} onChange={handlePasswordChange} />
        </label>
      </div>
      <button type="submit">Login</button>
    </form>
  );
}

export default LoginForm;

我们可以使用 Enzyme 的 mount 方法来测试组件的事件。首先，在测试文件中导入 LoginForm 组件和 mount 方法：

import React from 'react';
import { mount } from 'enzyme';
import LoginForm from './LoginForm';

然后，编写测试代码：

// javascriptcn.com 代码示例
describe('LoginForm component', () => {
  it('should submit form with correct values', () => {
    const wrapper = mount(<LoginForm />);
    const usernameInput = wrapper.find('input[type="text"]');
    const passwordInput = wrapper.find('input[type="password"]');
    const submitButton = wrapper.find('button[type="submit"]');
    usernameInput.simulate('change', { target: { value: 'test' } });
    passwordInput.simulate('change', { target: { value: 'password' } });
    submitButton.simulate('submit');
    expect(window.alert).toHaveBeenCalledWith('Username: test, Password: password');
  });
});

在这个测试中，我们模拟用户输入用户名和密码，并模拟用户点击登录按钮。然后，我们断言 window.alert 方法是否被正确调用。

总结

本文介绍了如何使用 React、Jest 和 Enzyme 进行单元测试，包括测试组件的状态、Props 和事件。单元测试可以帮助我们提高代码质量和可维护性，建议在开发过程中养成编写单元测试的习惯。完整的示例代码可以在 GitHub 上查看。

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