Question

我是React Unit Testing的新手，对此问题深感困惑。

我有一个子组件，其父组件有一个onClick回调。然后，父级将根据回调更新子级props。该孩子具有基于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");

我假设我正在更新变量，但实际上并没有与道具prop连接吗？

其他信息：

当我运行项目（自定义样式更改）时，该行为运行良好
在我的特定情况下，我需要从父母那里控制孩子的道具
我目前有react-test-renderer和react-dom/test-utils，但是如果需要，我可以包含外部库
我在网上找到的最接近的答案是this one here，但我无法在项目中应用那里的解决方案

谢谢！

Answer 1

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

假设您正在使用酶，您将通过以下方式进行操作：

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道具？

1 个答案: