React 单元测试：安利一下 Enzyme
React 已经成为了现代前端开发的主流技术之一，但要充分利用它的好处还需要对 React 组件进行单元测试。对于初学者来说，这显然是一项挑战，但是这篇文章将介绍如何使用 Enzyme 工具更容易地测试 React 组件。
什么是 Enzyme？
Enzyme 是一个由 AirBnB 发布的库，它允许我们以编程方式测量我们的组件，并提供了一系列实用工具和 API，以便我们有效地测试 React 组件，包括支持 React16 的新特性，如 Fragments、 Portals 和错误边界处理。
为什么要使用 Enzyme？
起初，React 的单元测试并不容易。编写测试需要一些构建工具和 DOM 模拟器，例如 jsdom。然而，通过 Enzyme 的使用，我们可以更轻松地编写测试，从而提高开发效率。
Enzyme 提供了一些 API，可以方便我们找到、遍历和操作组件树。它支持浅渲染、完整 DOM 渲染和静态渲染等不同渲染方式。可以针对不同渲染方式编写相应的测试用例。
在进行 React 组件测试时，我们可能会面临以下问题：
组件的状态如何测试？
组件的生命周期如何测试？
组件的渲染是否正确？
这些问题 Enzyme 都为我们提供了相应的解决方案。
如何安装 Enzyme？
使用 npm 安装
npm install --save-dev enzyme enzyme-adapter-react-16
接着，在项目中创建一个 js 文件（例如：setupTests.js），添加以下内容以初始化 Enzyme：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });然后，在 package.json 中的 scripts 块中添加：
"test": "react-scripts test --env=jsdom",
这样我们就可以通过运行 npm test 来执行测试。
使用 Enzyme 进行测试
- 渲染组件
下面是一个简单的 Hello 例子，这是我们将要进行单元测试的组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ----- ------- --------- -
-------- -
------ ----------- ------------------------
-
-
------ ------- ------我们可以使用 Enzyme 的 shallow 函数来渲染组件：
import { shallow } from 'enzyme';
import Hello from './Hello';
it('renders without crashing', () => {
shallow(<Hello />);
});如果组件渲染成功，测试将会通过。
- 检查组件渲染内容
我们可以利用 find() 方法来查找并测试组件的标签和内容：
it('renders the correct text', () => {
const wrapper = shallow(<Hello name="John" />);
const welcome = <div>Hello, John!</div>;
expect(wrapper.contains(welcome)).toEqual(true);
});我们使用了 contains() 方法来匹配组件渲染的内容，并使用 toEqual() 方法来检查断言是否成立。
- 测试组件状态和 props
我们可以使用 setProps() 方法和 state() 方法来测试组件的 props 和状态：
-- -------------------- ---- ------- ------------- ------- --- ---- ------ -- -- - ----- ------- - -------------- ----------- ---- ------------------------------------------------------ ------------------ ----- ------- --- ------------------------------------------------------- --- ------------- ------- --- ----- --------- -- -- - ----- ------- - -------------- ----------- ---- -------------------------------------------- -------------------------------------- -------------------------------------- -------------------------------------------- ---
在第一个测试中，我们首先将传递给组件的 props 获取到，然后使用 setProps() 方法更新组件的 props，并检查是否更新成功。
在第二个测试中，我们测试了一个包含 incrementCounter() 方法的组件。我们开始时检查 counter 的状态值是 0，然后连续调用 incrementCounter() 方法两次，最后检查 counter 的状态值是否为 2。
- 模拟事件
我们可以使用 simulate() 方法来模拟组件上的事件操作：
it('correctly handles the click event', () => {
const onButtonClick = jest.fn();
const wrapper = shallow(<Hello onButtonClick={onButtonClick} />);
expect(onButtonClick.mock.calls.length).toEqual(0);
wrapper.find('button').simulate('click');
expect(onButtonClick.mock.calls.length).toEqual(1);
});在这个例子中，我们使用了 Props 中传递给组件的一个 onClick 事件。然后我们在测试中使用了 simulate() 方法模拟了一个点击事件，并使用 jest.fn() 来模拟这个事件的调用，最后将检查是否调用了模拟的函数。
总结
本文简单介绍了如何使用 Enzyme 工具来测试 React 组件。Enzyme 具有很多实用的 API，并且能够支持不同类型的渲染，从而使测试变得更加容易。我们可以通过测试组件的状态、事件、属性和功能来验证组件的正确性。通过对 Enzyme 的使用，我们可以编写更多的单元测试用例，提高我们的代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66446404d3423812e4247ad8