Enzyme + Jest 测试 React Native 应用-JavaScript中文网-JavaScript教程资源分享门户

Enzyme + Jest 测试 React Native 应用

在前端开发中，测试是非常重要的一部分。一些常见的测试工具包括 Mocha、Chai、Jasmine 和 Enzyme + Jest 等。其中，Enzyme + Jest 被广泛使用于 React Native 应用的测试中。本篇文章将介绍 Enzyme + Jest 的基本用法，以及如何应用于 React Native 应用的测试中。

Enzyme 简介

Enzyme 是 Airbnb 开发的一个 React 组件测试实用工具。Enzyme 提供了对 React 组件组成部分的不同层次的测试方式，如测试组件的 props、状态和子组件等。Enzyme 模拟了基于虚拟 DOM 的 React 组件的渲染方式，因此可以模拟与真实 DOM 环境相同的测试。

Enzyme 提供了三种测试组件的方式：Shallow、Mount 和 Render。

Shallow 测试方式将只渲染被测试组件的子组件，而不是整个 DOM 树。

Mount 测试方式将渲染整个组件树，并且启动了一个完整的 DOM 环境，使得可以进行完整的测试。

Render 测试方式与 Mount 类似，但是不会启动完整的 DOM 环境，而是使用类似于 jQuery 返回的虚拟 DOM 节点。

Jest 简介

Jest 是 Facebook 开发的一个 JavaScript 测试框架，也被广泛应用于 React Native 应用测试中。Jest 提供了快速、细致和自动化的测试方式，因此可以在大型 JavaScript 应用程序中进行测试，而不会降低项目的速度和效率。Jest 可以单独或与其他测试库一起使用。

Enzyme + Jest 的用法

Enzyme + Jest 配合使用可以很好的测试 React Native 应用，下面将介绍 Enzyme + Jest 常用方法及其用法。

安装

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

针对 React Native，需要添加 Enzyme 的 React Native 适配器：

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

在 Jest 配置文件中，应添加以下代码：

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

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

测试组件

简单的创建一下测试组件：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------

----- ------------- - -- -- -
  ------ -
    ----- ------------------------
      ------------ -------------
    -------
  --
--

------ ------- --------------

下面是一个最基本的测试用例，使用 Enzyme + Jest 测试上面的组件，简单的验证了该组件是否正确地渲染：

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

test('TestComponent render correctly', () => {
  const wrapper = shallow(<TestComponent />);
  expect(wrapper.find({ testID: 'test-component' })).toHaveLength(1);
});

测试组件的 props

在测试中，很常见的一个需求是测试组件的 props 是否正确。Enzyme 提供了 .props() 方法来获取组件的 props 信息。下面的测试用例中，测试了组件的 props 是否被正确地传递：

test('TestComponent render props correctly', () => {
  const wrapper = shallow(<TestComponent name="John" />);
  expect(wrapper.find({ testID: 'test-component' }).props().name).toEqual('John');
});

测试组件的状态

Enzyme 提供了 .state() 方法用于获取组件的状态信息。下面的测试用例中，测试了当组件的状态被更改后，组件会正确地更新：

test('TestComponent update state correctly', () => {
  const wrapper = shallow(<TestComponent />);
  const instance = wrapper.instance();

  instance.setState({ name: 'John' });
  expect(wrapper.find({ testID: 'test-component' }).state().name).toEqual('John');
});

测试组件的事件

测试组件的事件是 Enzyme 中应用最广泛的场景之一。Enzyme 提供了 .simulate() 方法来模拟 DOM 事件。下面的测试用例中，测试了当点击按钮后，组件是否正确地处理了事件：

test('TestComponent handle click event correctly', () => {
  const onClick = jest.fn();
  const wrapper = shallow(<TestComponent onClick={onClick} />);
  const button = wrapper.find({ testID: 'test-button' });

  button.simulate('click');
  expect(onClick).toHaveBeenCalled();
});

测试组件的子组件

在测试组件中，很常见的一个需求是测试组件的子组件是否被正确地渲染。下面的测试用例中，测试了组件是否正确地渲染了子组件：

test('TestComponent render child components correctly', () => {
  const wrapper = shallow(
    <TestComponent>
      <Text>Hello, Child Component!</Text>
    </TestComponent>
  );
  expect(wrapper.find({ testID: 'test-child-component' }).text()).toEqual('Hello, Child Component!');
});

总结

Enzyme + Jest 提供了多种测试组件的方式，灵活性高，应用广泛。在 React Native 开发中，测试不仅仅是测试代码正确性的手段，也是提高代码质量的重要手段。良好的测试习惯，有助于减少代码出错的可能性，并提高代码的可读性、可维护性及可扩展性。

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