useEffect 内的函数调用在玩笑测试中未触发

Question

我有一个组件，单击按钮时将更新的值通过 发送给父级props.OnValChange。这是在useEffect钩子中实现的。如果我通过控制台记录 useEffect，我可以看到它被调用。但在我的测试中，当我expect(prop.OnValChange).toHaveBeenCalledTimes(1);这样做时，它说它被调用了 0 次。

成分：

const MyComp = ({OnValChange}) => {
    const [ val, setVal ] = useState(0);

    useEffect(() => {
        console.log("before");
        OnValChange(val);
        console.log("after");
    }, [val]);

    return (
        <button onClick={() => setVal(val + 1)}>Count</button>
    )
}

测试：

it("Sends val to parent when button is clicked", () => {
    const prop = {
        OnValChange: jest.fn();
    }

    const control = mount(<MyComp {...prop} />);

    expect(prop.OnValChange).toHaveBeenCalledTimes(0);
    control.find(button).simulate("click");
    expect(prop.OnValChange).toHaveBeenCalledTimes(1);
}) 

Answer 1

useEffect当组件最初安装时总是会被调用一次，并且当您触发按钮单击时会被调用第二次，所以正确的测试应该是这样的

it("Sends val to parent when button is clicked", () => {
    const prop = {
        OnValChange: jest.fn();
    }

    const control = mount(<MyComp {...prop} />);

    expect(prop.OnValChange).toHaveBeenCalledTimes(1);
    control.find(button).simulate("click");
    expect(prop.OnValChange).toHaveBeenCalledTimes(2);
})

如果总是0次，我怀疑是版本的问题enzyme-adapter-react-16。当我切换版本时1.13.0，也会出现和你一样的问题，你可以尝试enzyme -adapter-react-16更新到最新版本。