时间戳

首页 > 解决方案 > 如何在单元测试期间更新 React 组件道具？

reactjs - 如何在单元测试期间更新 React 组件道具？

问题描述

我是 React 单元测试的新手，并且被这个问题困扰着。

我有一个子组件，它有一个onClick回调到它的父组件。然后，父级将props根据回调更新子级。孩子具有基于道具值的自定义样式。

像这样的东西：

// Parent
const ParentComponent = () => {
    let isActive = false;
    const clickCallback = () => {
        isActive = true;
    }
    return <ChildComponent handleClick={clickCallback} active={isActive} />
}

// Child
const ChildComponent = (props) => {
    return <button onClick={props.handleClick} style={props.active} />
}

我的问题是：我如何测试这种行为？我想确保在单击子组件时，我的自定义样式将被更新。

我尝试了这种方法，但没有奏效：

let mockIsActive = false;
const mockCallback = () => {mockIsActive = true;}
ReactDOM.render(
    <ChildComponent handleClick={mockCallback} active={mockIsActive} />, 
    container
);

const myChild = container.querySelector("button");
expect(myChild.getComputedStyle).toEqual("my check here");
myChild.dispatchEvent(new MouseEvent("click", {bubbles: true}));
expect(myChild.getComputedStyle).toEqual("my new check here");

我假设我正在更新变量，但这并没有真正连接到组件道具？

额外的信息：

谢谢！

标签： reactjsunit-testingparent-child

解决方案

我建议您使用 Enzyme 和 Jest 来测试您的组件，它们提供的 API 丰富而广泛。

假设您正在使用 Enzyme，您将这样做：

const wrapper = shallow(<Parent />);

wrapper.find(Child).props().handleClick();
expect(wrapper.instance().isActive)).to.equal(true); // Assuming Parent is a class based component

我的建议是尝试将每个组件作为一个单元进行测试，这样您就可以涵盖所有情况。我希望这对您的测试有所帮助。

推荐阅读