Enzyme + Jest 测试环境搭建和初始化配置-JavaScript中文网-JavaScript教程资源分享门户

前端领域中的自动化测试已经越来越受到开发者们的重视，而 Enzyme + Jest 的组合在 React 开发项目中已经成为一个核心的测试框架。在使用 Enzyme + Jest 进行 React 组件的测试时，如何正确搭建与配置测试环境以及进行初始化应该是必备的技能，本篇文章会详细介绍相关的内容。

安装及配置

使用 Enzyme + Jest 进行 React 组件的测试前，我们需要先安装相应的依赖。在 Terminal 中使用如下命令即可完成：

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

安装完成后，我们需要在项目中创建setupTests.js文件（如果该文件不存在），并对其进行配置。

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

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

以上步骤完成后，我们的测试环境就已经搭建完成。

基本测试用例

接下来，我们将介绍 Enzyme + Jest 的操作使用，并利用一个简单的 React 组件来做一个基本的测试用例。

首先，我们需要在测试文件中进行引入。

import React from 'react';
import { shallow } from 'enzyme';

import MyComponent from './MyComponent';

在该测试用例中，我们引入了一个 React 组件 MyComponent，并使用 shallow() 方法来创建一个测试实例。在接下来的断言中，我们可以根据这个测试实例进行测试。

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

以上代码中，我们使用 Jest 的 describe 方法来描述测试用例的逻辑结构，其中包括需要测试的组件名称，以及相应的测试方法。在测试方法中，我们使用 expect 断言方法，判断渲染结果是否正确。

更多的断言

除了 toMatchSnapshot() 方法之外，我们还可以使用多种 Enzyme + Jest 断言方法来对测试结果进行判断。以下是一些常用的 API：

.find()

.find() 方法用于查找子元素的存在情况。

describe('MyComponent', () => {
  it('should contain a button with text "Click Me"', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('button').text()).toEqual('Click Me');
  });
});

以上代码中，我们使用了 find() 方法来查找 MyComponent 组件中是否存在一个文本为 Click Me 的按钮。

.simulate()

.simulate() 方法用来触发 DOM 事件。

describe('MyComponent', () => {
  it('should call submit function when submission is clicked', () => {
    const onButtonClick = jest.fn();
    const wrapper = shallow(<MyComponent onSubmit={onButtonClick} />);
    wrapper.find('.submit-button').simulate('click');
    expect(onButtonClick).toHaveBeenCalled();
  });
});

以上代码中，当用户点击 .submit-button 元素时，我们使用 simulate() 方法来模拟一个点击事件，在事件触发后，使用 Jest 提供的 mock 函数来确定点击按钮时是否调用了预期的函数。

.props()

.props() 方法可以用来获取实例的 props。

describe('MyComponent', () => {
  it('should render with correct props', () => {
    const wrapper = shallow(<MyComponent name='John' age='28' />);
    expect(wrapper.props().name).toEqual('John');
    expect(wrapper.props().age).toEqual('28');
  });
});

以上代码中，我们使用了 props() 方法来判断组件的两个 prop 值是否与预期值一致。

结尾语

在本文中，我们对 Enzyme + Jest 的测试环境搭建和基础操作做了详细的介绍。通过以上内容的学习，我们相信您已经能够开始熟练使用 Enzyme + Jest 进行 React 组件的测试，并从中获得更好的代码质量和更快的开发速度。

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

Enzyme + Jest 测试环境搭建和初始化配置