Enzyme 如何在测试中将 props 传入 React 组件？-JavaScript中文网-JavaScript教程资源分享门户

简介

Enzyme 是 React 生态中非常受欢迎的测试工具之一，它能够模拟渲染的过程，并且提供丰富的 API 来操作渲染结果，方便开发者编写各种类型的测试。

在编写 React 组件的测试时，通常需要给组件传递 props，以确保组件能够正确地展示和处理这些 props。本文将介绍如何在测试中将 props 传入 React 组件。

Enzyme 的三种渲染方式

在 Enzyme 中，有三种渲染方式：

shallow()：渲染目标组件，但会绕过子组件内部的渲染，因此测试更快。适用于只需要测试目标组件本身的情况。
mount()：完全渲染目标组件及其子组件，适用于测试目标组件与子组件的交互、事件等情况。
render()：以静态 HTML 字符串的方式渲染组件，用于生成 HTML 结构的快照。

在本文中，我们将使用 shallow() 渲染方式。

将 props 传入组件

在 Enzyme 中，可以通过 props() 方法将 props 传入组件。具体用法如下：

const wrapper = shallow(<MyComponent someProp="hello" />);
expect(wrapper.props().someProp).toEqual("hello");

上述代码中，我们使用 shallow() 渲染 MyComponent 组件，并给它传递了一个名为 someProp 的 prop，并断言这个 prop 的值为 "hello"。

如果需要测试多个 props，可以传递一个对象作为参数：

const wrapper = shallow(<MyComponent someProp="hello" anotherProp={123} />);
expect(wrapper.props()).toEqual({
  someProp: "hello",
  anotherProp: 123
});

在测试中修改 props

有时候需要在测试中修改已有的 props 值，以测试这个组件在不同 props 下的表现。可以使用 setProps() 方法来实现这一目的。

const wrapper = shallow(<MyComponent someProp="hello" />);
wrapper.setProps({ someProp: "world" });
expect(wrapper.props().someProp).toEqual("world");

上述代码中，我们使用 shallow() 渲染 MyComponent 组件，并使用 setProps() 方法将 someProp 的值从 "hello" 变成了 "world"，最后断言组件的 someProp 值为 "world"。

总结

在测试中，我们需要给组件传递 props 以确保组件能够正确地展示和处理这些 props。在 Enzyme 中，可以使用 props() 方法将 props 传入组件，使用 setProps() 方法修改已有的 props 值。

Enzyme 的 API 丰富，还有许多其他有用的方法可以用来操作组件渲染结果。希望本文能对你在 React 组件测试中使用 Enzyme 时的 props 传递有所帮助。

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