什么是 Enzyme
Enzyme 是一个开源 JavaScript 库，专门用于 React 组件的测试。它提供了一套易于使用的 API，以声明式方式访问 React 组件的内部状态和实现，以便测试这些组件的行为和输出。
Enzyme 的使用
安装
可以通过 npm 或 yarn 安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
或者：
yarn add --dev enzyme enzyme-adapter-react-16
配置
在使用 Enzyme 之前，需要先配置测试环境，以便它能够和 React 协同工作。在配置中，需要指定 React 的适配器（adapter），使之与当前 React 版本兼容。
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });使用方法
shallow rendering
shallow 是 Enzyme 提供的一种渲染机制，它不需要完全渲染组件的嵌套子组件，只需渲染一层即可。它的优点是速度快，渲染结果与实际渲染结果几乎相同。
import { shallow } from 'enzyme';
import App from './App';
it('renders without crashing', () => {
shallow(<App />);
});存根模拟
使用 Enzyme 可以很容易地模拟子组件的返回值，这可以让您在测试中专注于测试当前组件的时候忽略子组件。
-- -------------------- ---- ------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ------ ------------- ---- ------------------ ----------- ------- ---------- -- -- - ----- ------- - -------------------- ---- ---------------------------------------------- ---------------------------------------------- ---
测试事件处理程序
通过使用 shallow 和 find，可以模拟事件并轻松测试组件处理程序。
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
it('should change state on button click', () => {
const wrapper = shallow(<MyComponent />);
wrapper.find('button').simulate('click');
expect(wrapper.state('toggle')).toEqual(true);
});组件测试
在 React 应用程序中，组件是构建块。通过测试每个组件，我们可以确保整个应用程序能够正常工作。
-- -------------------- ---- ------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ---------- ------ ------------- -- -- - ----- ------- - -------------------- ---- ------------------------------------ --- ---------- ------ ----------- ---- ------- ------- -- -- - ----- ------- - -------------------- ------------- ------- ---- ------------------------------------------------------ --------- --- ---------- ---- -- ------- -- -- - ----- ------- - -------------------- ---- ------------------------------------------------ --- ---------- ---- -- ----- ---- ------- ------- -- -- - ----- ------- - -------------------- ---- -------------------------------------------------------- --- ---------- ------ --- ----- ------- -- -- - ----- ------- - -------------------- ---- ---------------------------------------- - ------- - ------ ------- ------- - --- ----------------------------------------------------------- --------- ---
总结
使用 Enzyme 是 React 单元测试的一个很好的工具。它提供了易于使用的 API，减少了您用于测试 React 组件的代码量，并提供了简单的 API 用于更好地了解您的 React 组件。在编写 React 组件时，请考虑编写单元测试以确保代码质量和问题确定，并提供文档和指导以帮助防止未来的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f069a968c7c53b0123df1