Jest + React + Enzyme 最佳实践分享-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，测试是非常重要的一部分。Jest、React、Enzyme 是三个在前端测试中非常流行的工具。Jest 是 Facebook 开源的一个 JavaScript 测试框架，React 是 Facebook 对界面库的实现，Enzyme 是 Airbnb 开源的 React 组件测试工具。在使用 Jest、React、Enzyme 进行前端测试时，我们可以通过一些最佳实践提高效率和准确度。

Jest 基础

在使用 Jest 进行前端测试时，我们需要对 Jest 的基础知识有一定的掌握。

安装 Jest

我们可以通过 npm 来安装 Jest：

npm install --save-dev jest

安装完成后，在 package.json 中添加如下代码：

"script": {
  "test": "jest"
}

这将会让我们在终端运行以下命令来执行 Jest 测试：

npm run test

快照测试

快照测试是 Jest 常用的测试方式之一，在测试期间 Jest 会自动保存组件和页面的快照，验证快照是否和之前一致。

在 React 中进行快照测试时，我们可以在组件的 test 文件中使用如下代码进行测试：

import React from 'react';
import renderer from 'react-test-renderer';
import Button from '../button';

test('Button component renders correctly', () => {
  const tree = renderer.create(<Button label="Click me!" />).toJSON();
  expect(tree).toMatchSnapshot();
});

运行测试时，Jest 会自动生成一个快照文件，之后的测试将会把组件和这个文件对比来检测是否一致。如果不一致，Jest 就会提示我们更新快照。

异步测试

在前端开发中，异步操作是非常常见的，在 Jest 中也有对应的异步测试方法。

test() 函数中可以接收一个 done 函数作为参数，我们可以在异步完成之后调用 done() 函数来通知 Jest 完成了异步操作。

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

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

Mock 和 Spy

在前端测试中，Mock 和 Spy 是非常有用的工具。

Mock 可以模拟某些方法，让我们可以方便的测试结果，而不需要考虑真正的依赖。

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

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

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

Spy 可以运行测试时捕获到函数的所有调用，并记录下来。这让我们可以方便的监控组件中和其他的逻辑中每一个方法的调用情况。

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

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

React 组件测试

在 React 组件测试中，Enzyme 是非常常用的工具。

Enzyme 可以方便的操作组件的生命周期和各个状态，并让我们可以方便的检测组件的渲染结果。

安装 Enzyme

我们可以通过 npm 来安装 Enzyme：

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

安装完成后，在 src 目录中添加 setupTests.js 文件，并添加以下代码：

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

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

这将会启用 Enzyme 的适配器，并让我们可以方便的操作 React 16 以上的版本。

浅渲染

在测试中，我们可以使用 shallow() 函数来进行浅渲染。浅渲染可以让我们只渲染组件的外层结构，而不会渲染组件内部的子组件。这样可以减少测试的时间，并提高测试的效率。

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

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

完整渲染

在测试中，我们可以使用 mount() 函数来进行完整渲染。完整渲染会渲染组件内部的所有子组件和元素，并让我们可以方便的检测组件的状态和状态变化。

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

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

模拟事件

在测试时，我们可以使用 simulate() 函数来模拟各种事件。这样可以方便的检测事件是否触发，以及组件的状态是否正确。

it('should update input value on change event', () => {
  const wrapper = mount(<MyComponent />);
  const input = wrapper.find('.my-input');
  input.simulate('change', { target: { value: 'new value' } });
  expect(wrapper.state('inputValue')).toBe('new value');
})

最佳实践

在使用 Jest、React、Enzyme 进行前端测试时，我们可以通过以下最佳实践来提高效率和准确度。

模拟数据设计

在进行测试时，可以通过模拟数据来减少组件的依赖，使测试更加稳定。

每个测试文件中定义测试数据
使用 beforeEach() 函数来在每个测试之前重置数据
使用常量来保存常用数据

对组件可复用性的考虑

在进行测试时，可以通过考虑组件的可复用性来提高测试的效率。

尽量使用通用的测试数据，而不是针对具体的数据进行测试
在测试文件中封装一些通用的测试逻辑，并进行复用
尽量使用浅渲染，而不是完整渲染来提高测试效率

验证方法和事件

在进行测试时，可以对相应的方法和事件进行验证。

验证方法是否被调用
验证事件是否触发，以及组件状态是否正确
使用 Mock 来模拟相应的方法和事件，使测试更加准确

总结

在本次分享中，我们介绍了 Jest、React、Enzyme 这三个前端测试工具的基础知识和常用方法，提供了一些最佳实践来提高测试的效率和准确度。当然，在实际开发过程中，我们也可以结合自己的需求和特点来进行测试的设计。希望这篇文章能够对前端测试的学习和实践有所帮助。

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

Jest + React + Enzyme 最佳实践分享