在 useEffect 状态更改后，React Hooks Wrapper 未更新

Question

当前行为

我在useEffect使用了一个带有setState钩子的功能组件。 在useEffect设置的状态变量被包装在 return 语句中以呈现组件的 JSX。

当我调试它时，组件使用正确的状态变量呈现，但我的测试中的包装器没有显示正确的信息。

wrapper.update()没有解决这个问题。

下面是我试图实现的一个片段：

const DummyComponent= ({}) => {
    const [selected, setSelected] = React.useState(false);

    useEffect(() => {
      setSelected(true)
    }, [someDependency])

    return (
      { 
         selected && (
         <div id= 'container'>
            {childComponents}
          </div>)
       }
    );
    })

it('test', () => {
     const wrapper= mount( <DummyComponent  /> ); 
    wrapper = wrapper.update(); // this doesn't fix my problem   
    wrapper.find('#container')first().props().onClick();
    expect(wrapper.toMatchSnapshot());
});

我收到以下错误：

Method “props” is meant to be run on 1 node. 0 found instead.

预期行为

在useEffect状态更新之后，应该在测试用例中触发重新渲染，并且应该找到id="container"元素。

注意：这与https://github.com/enzymejs/enzyme/issues/2305 不同

Answer 1

在我看来，您的真实代码还存在其他问题（也许在效果中调用了一些基于 Promise 的代码？）。 这是一个基于您的代码段的工作示例：

const DummyComponent = ({}) => {
    const [selected, setSelected] = React.useState(false);
    const [result, setResult] = React.useState("");

    React.useEffect(() => {
        setSelected(true);
    }, []);

    return selected && <div id='container' onClick={() => setResult("test")}>
        <label>{result}</label>
    </div>;
};

it('test', () => {
    const wrapper = mount(<DummyComponent/>);
    act(() => {
        wrapper.find('#container').first().props().onClick();
    });
    expect(wrapper.find("label").text()).toEqual("test");
});

该act实际上仅用于与组件本身的交互，而不是渲染后的效果。

Answer 2

问题是当你第一次挂载组件时，它不会渲染任何东西，因为selected是 false。 因此，当您搜索'#container' ，您什么也得不到。

如果update足够了，那么它可能应该在wrapper.find()之前执行，以便组件以selected true 呈现。 但是 React 是异步的，我怀疑这还不够……

Answer 3

我解决了我的问题，实际上我需要将我的组件分配给不同的包装器，然后更新包装器，然后检查包装器而不是组件上的更新。 下面是片段：

it('test', () => {

     const component= mount( <DummyComponent  /> ); 
     const wrapper = component.update();  
     wrapper.find('#container')first().props().onClick();
     expect(wrapper.toMatchSnapshot());

}); 

这将具有更新的组件