使用 Enzyme 和 Jest 测试 React Native 应用

在前端开发中，测试是一个极其重要的部分。针对于 React Native 应用，测试可以帮助我们快速的发现问题，并帮助我们更好地维护应用的质量。在这篇文章中，我们将会使用 Enzyme 和 Jest 这两个知名的测试框架，来讲解如何测试 React Native 应用。

准备工作

在开始测试之前，我们需要先准备好测试环境和所需的库。以下是需要使用到的库。

  • jest
  • enzyme
  • react-test-renderer
  • @testing-library/react-native
  • @babel/plugin-transform-modules-commonjs
  • @babel/preset-env

当然，这些库的安装命令可以使用 yarn 和 npm 来完成。

# 使用 npm 安装
npm install --save-dev jest enzyme react-test-renderer @testing-library/react-native @babel/plugin-transform-modules-commonjs @babel/preset-env

# 使用 yarn 安装
yarn add --dev jest enzyme react-test-renderer @testing-library/react-native @babel/plugin-transform-modules-commonjs @babel/preset-env

如上所述，我们首先需要安装 Jest 和 Enzyme，然后我们还需要安装 react-test-renderer 和 @testing-library/react-native。这些库都是帮我们进行测试所需要的工具和设置。

编写测试

在安装所有依赖之后，我们需要编写我们的测试用例主文件。我们可以在项目根目录下创建一个名为 __tests__ 的目录，用于存放我们的测试用例文件。

我们将使用一个简单的组件作为测试用例，来讲解如何使用 Enzyme 和 Jest 进行测试。

import React, { useState } from 'react';
import { View, Text, TextInput } from 'react-native';

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

  const handleIncrement = () => setCount(count + 1);
  const handleDecrement = () => setCount(count - 1);

  return (
    <View>
      <Text>Count: {count}</Text>
      <View style={{ flexDirection: 'row' }}>
        <TextInput value={count.toString()} />
        <View style={{ flexDirection: 'column' }}>
          <Button title="+" onPress={handleIncrement} />
          <Button title="-" onPress={handleDecrement} />
        </View>
      </View>
    </View>
  );
};

export default Counter;

这个组件非常简单，它将 count 值显示在一个 Text 组件中。TextInput 组件将 count 的值作为它的 value 值，而两个 Button 组件则用于增加或减少 count 的值。

接下来，我们将撰写我们的测试用例：

tests/Counter.test.js

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

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

  it('should update count on increment button press', () => {
    const wrapper = shallow(<Counter />);
    wrapper.findWhere((node) => node.prop('title') === '+').simulate('press');
    expect(wrapper.find('Text').prop('children')).toEqual(['Count: ', 1]);
  });

  it('should update count on decrement button press', () => {
    const wrapper = shallow(<Counter />);
    wrapper.findWhere((node) => node.prop('title') === '-').simulate('press');
    expect(wrapper.find('Text').prop('children')).toEqual(['Count: ', -1]);
  });
});

在上面的测试用例中，我们包含三个测试：

  • 第一项测试，是用来测试组件的快照是否正确。
  • 第二项和第三项测试，分别用于测试组件是否能够正确的响应按钮的点击事件，即增加或减少 count 值。

由于此处我们使用了 shallow 函数，因此我们只测试了 Counter 组件的一层，而并没有去测试子组件。

在我们执行测试之前，我们还需要添加一个 jest.config.js 文件。这个文件将帮助我们对测试进行相关的配置。

jest.config.js

module.exports = {
  transform: {
    '^.+\\.js$': 'babel-jest',
  },
  testRegex: '/__tests__/.*\\.(test|spec)\\.js$',
  moduleFileExtensions: ['js', 'json', 'jsx', 'node'],
  preset: '@babel/preset-env',
  setupFilesAfterEnv: ['@testing-library/react-native/cleanup-after-each'],
};

配置中的几个关键设置包括：

  • transform：指定使用 Babel 进行编译。
  • testRegex：指定测试文件路径，用于 Jest 在测试时查找文件。
  • moduleFileExtensions：指定可以进行测试的文件类型。
  • preset：指定我们需要执行的测试之前，要使用哪种类型的预设。
  • setupFilesAfterEnv：指定测试之前，需要执行哪些操作。

运行测试

当一切都准备好了之后，我们就可以开始运行测试了。

npm run test

或

yarn test

在测试运行完毕后，我们就可以看到以下结果：

运行结果显示，我们的三个测试都已成功通过。

总结

使用 Enzyme 和 Jest 测试 React Native 应用非常简单，而且还能够帮助我们提高开发效率以及整个应用的质量。有关此主题的更多深度细节和指导请看官者可以参照 Enzyme 和 Jest 的文档进行深入学习，以更好地提高自身的移动端开发能力。

完整代码请访问 Github。

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

阅读全文

精选内容

相关推荐

    暂无