如何在 Enzyme 中测试组件接收的 props？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发过程中，我们经常需要测试组件接收的 props 是否符合预期，从而保证组件的可靠性和正确性。在 Enzyme 中，我们可以使用一些方法测试组件接收的 props。

Enzyme 简介

Enzyme 是一个 React 测试库，它提供了一些工具和方法用于测试 React 组件的输出和状态。

Enzyme 的三个主要组件包括：

shallow：渲染组件的第一级，不渲染子组件。
mount：将组件完全渲染，并且将子组件也渲染出来。
render：将组件渲染为静态 HTML，并返回一个 Cheerio 包装器。

在本文中，我们将通过 shallow 方法来测试组件的 props。

测试 props

在 Enzyme 中测试组件接收的 props，我们可以用 props() 方法。

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

props() 方法返回组件的一个对象，包含了所有 props 属性和他们的值。

我们可以通过链式操作和可选参数来进行更严格的测试：

expect(wrapper.props("someProp")).toEqual("someValue");
expect(wrapper.props()).toEqual({ someProp: "someValue" });

props 对象也可以用来测试事件监听器等功能：

const clickHandler = jest.fn()
const wrapper = shallow(<Component onClick={clickHandler} />);
wrapper.props().onClick() // 触发事件
expect(clickHandler).toHaveBeenCalled() // 测试回调监听器是否被调用

示例代码

现在，我们来看一个例子。假设我们有一个组件，它接收两个 props（name 和 age）并将它们显示在页面上：

import React from "react";

const UserInfo = ({ name, age }) => (
  <div>
    <span>{name}</span>
    <span>{age}</span>
  </div>
);

我们可以使用下面的测试代码来测试组件是否正确地接收了传递给它的 props：

// javascriptcn.com 代码示例
import React from "react";
import { shallow } from "enzyme";
import UserInfo from "./UserInfo";

describe("UserInfo component", () => {
  it("renders UserInfo component with given props", () => {
    const name = "John Doe";
    const age = 30;
    const wrapper = shallow(<UserInfo name={name} age={age} />);
    expect(wrapper.props().name).toEqual(name);
    expect(wrapper.props().age).toEqual(age);
  });
});

这个测试用例测试了组件是否以正确的 props 显示页面。如果测试通过，则组件的可靠性和正确性就得到了保证。

总结

在本文中，我们介绍了 Enzyme 中测试组件接收的 props 的方法。Enzyme 的 props() 方法可以帮助我们轻松地测试组件的 props，保证组件的可靠性和正确性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6549e22b7d4982a6eb4181a2