如何在单元测试期间更新 React Component 道具？

Question

我是 React 单元测试的新手，被这个问题困住了。

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

像这样：

// 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} />
}

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

我试过这个方法，但没用：

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");

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

补充信息：

当我运行项目（自定义样式更改）
我需要在我的特定场景中控制来自 parent 的 child 道具
我目前有 react-test-renderer 和 react-dom/test-utils，但如果需要，我可以包含外部库
我在网上找到的最接近的答案是，但我无法在我的项目中应用那里的解决方案

谢谢！

Answer 1

我建议您使用 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

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

如何在单元测试期间更新 React Component 道具？

How to update React Component props during unit tests?

unit-testing

parent-child

reactjs