react-shallow-testutils 是一个基于 React 的浅渲染工具。它为我们提供了一种在本地运行单元测试的方法，而无需使用浏览器。
在本文中，我们将会学习如何使用 react-shallow-testutils 进行单元测试，例如如何模拟用户交互并断言行为与预期一致。
安装
首先，我们需要使用 npm 将 react-shallow-testutils 安装到项目中。
npm install --save-dev react-shallow-testutils
接下来，我们需要在测试文件里引入需要测试的组件和 react-shallow-testutils。
import React from 'react';
import { shallow } from 'react-shallow-testutils';
import Component from './Component';测试
在测试的文件中，我们需要编写一个或多个测试用例。每个测试用例都应包含三个阶段：准备、执行和断言。
准备
首先，我们需要定义我们要测试的组件。
describe('Component', () => {
it('should render', () => {
const wrapper = shallow(<Component />);
expect(wrapper).toMatchSnapshot();
});
// ...
});执行
接下来，我们需要执行一些操作，例如交互或触发事件。
假设我们要测试一个带有标签和输入域的组件，当将数据输入输入域时，标签应显示该数据。为了实现此功能，我们可以模拟用户输入并断言输出。
it('should update on input', () => {
const wrapper = shallow(<Component />);
const input = wrapper.find('input');
const label = wrapper.find('label');
input.simulate('change', { target: { value: 'example' } });
expect(label.text()).toBe('example');
});断言
在操作后，我们需要断言组件的行为是否正常。
it('should render children', () => {
const wrapper = shallow(<Component><div>Hello World!</div></Component>);
expect(wrapper.contains(<div>Hello World!</div>)).toBe(true);
});在这个示例中，我们传递一个子元素到组件中，然后断言该元素是否被正确地渲染。
结论
使用 react-shallow-testutils 可以很容易地实现 React 组件的单元测试。通过编写详细且有深度的测试用例，我们可以确保组件的行为符合预期，并且能够在项目中识别和修复问题。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------------------
------ --------- ---- --------------
--------------------- -- -- -
---------- -------- -- -- -
----- ------- - ------------------ ----
----------------------------------
---
---------- ------ -- ------- -- -- -
----- ------- - ------------------ ----
----- ----- - ----------------------
----- ----- - ----------------------
------------------------ - ------- - ------ --------- - ---
-------------------------------------
---
---------- ------ ---------- -- -- -
----- ------- - ----------------------------- --------------------------
---------------------------------- --------------------------
---
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60870