reactjs - 如何在单元测试期间更新 React Component props？

Question

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

我有一个子组件，其父组件有一个 onClick 回调。然后，父级将根据回调更新子级 props。 child 有一个基于 Prop 值的自定义样式。

类似这样的事情:

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

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

额外信息:

• 当我运行项目时，行为正常(自定义样式更改)
• 我需要在特定场景中控制父级的子 props
• 我目前有 react-test-renderer 和 react-dom/test-utils，但如果需要，我可以包含外部库
• 我在网上找到的最接近的答案是 this one here ，但我无法在我的项目中应用这些解决方案

谢谢!

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

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