React Native + Enzyme 手机端自动化测试实战-JavaScript中文网-JavaScript教程资源分享门户

React Native 的特性使得它成为开发跨平台应用程序的有力工具；Enzyme 则是一个流行的React测试工具库。将两者结合起来，React Native 开发人员可以使用 Enzyme 进行自动化测试，确保其应用程序在不同平台上的可靠性。

在本文中，我们将介绍如何在 React Native 中使用 Enzyme 进行自动化测试，并提供有深度和指导意义的实战例子，让你学习并掌握这项技能。

准备工作

在开始编写测试之前，我们首先要确保安装了 React Native 开发所需的环境和依赖。

在此基础上，我们需要安装 Enzyme 以及与 React Native 兼容的 Adapter：

npm install --save-dev enzyme jest-enzyme react-test-renderer

在 package.json 文件中，添加以下配置：

"jest": {
  "preset": "react-native",
  "testEnvironment": "node",
  "transformIgnorePatterns": [
    "node_modules/(?!((jest-)?react-native|react-navigation))"
  ]
},

编写测试用例

我们编写一个简单的测试用例，检验 React Native 的 Text 组件是否正确显示。首先，在 tests/index.test.js 文件中导入需要测试的组件和依赖：

import React from 'react';
import { Text } from 'react-native';
import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';

在测试文件中，我们定义一个测试用例：

it('testing Text component', () => {
  const tree = renderer.create(<Text>Hello World!</Text>).toJSON();
  expect(tree).toMatchSnapshot();
});

这个测试用例使用了 renderer.create() 函数渲染了一个 Text 组件，并用 toJSON() 方法将组件的所有属性和子组件输出为 JSON 格式的字符串。

实际上，我们还可以使用 Enzyme 的浅渲染方法来测试 Text 组件：

const wrapper = shallow(<Text>Hello World!</Text>);
expect(wrapper.contains("Hello World!")).toBeTruthy();

在这个测试用例中，我们使用 shallow() 函数浅渲染了 Text 组件，然后检查渲染结果是否包含字符串“Hello World!”。

运行测试用例

我们使用 Jest 运行测试用例。在 package.json 文件中添加以下 npm scripts：

{
  "scripts": {
    "test": "jest"
  }
}

运行 npm test 命令，Jest 将开始运行测试用例，并输出运行结果。若测试用例通过，输出文本如下：

 PASS  __tests__/index.test.js
  ✓ testing Text component (7 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 passed, 1 total

若测试用例未通过，输出文本如下：

// javascriptcn.com 代码示例
 FAIL  __tests__/index.test.js
  ✕ testing Text component (11 ms)

  ● testing Text component

    expect(received).toBeTruthy()

    Received: false

      27 |     const wrapper = shallow(<Text>Hello World!</Text>);
      28 |     console.warn(wrapper.debug());
    > 29 |     expect(wrapper.contains("Hello World!")).toBeTruthy();
         |                                             ^
      30 |   });
      31 | });
      32 | 

      at Object.it (__tests__/index.test.js:29:45)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total

总结

在本文中，我们学习了如何在 React Native 应用程序中使用 Enzyme 进行自动化测试，愿通过这篇文章的学习和实践，您不仅能够掌握这项技能，而且能够利用这些知识构建更加健壮和可靠的 React Native 应用程序。

示例代码：

// javascriptcn.com 代码示例
import React from 'react';
import { Text } from 'react-native';
import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';

it('testing Text component', () => {
  const tree = renderer.create(<Text>Hello World!</Text>).toJSON();
  expect(tree).toMatchSnapshot();
});

it('testing Text component with shallow rendering', () => {
  const wrapper = shallow(<Text>Hello World!</Text>);
  expect(wrapper.contains("Hello World!")).toBeTruthy();
});

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