React中的测试：如何从testfile设置状态？

Question

我想测试一个组件，它包含条件渲染。因此，如果一个状态为true，那么JSX-HTML应该呈现，如果不是false的话。

如果我想使用Jest、Enyzme、React测试库来测试这一点，我应该如何继续？

我有一个组件，它的实现细节对这个主题并不重要。请注意，它包含

const [isBlocked, setIsBlocked] = useState(false);

对于我的测试，我想把它设置为真。

describe('rendering DiffWindow', () => {
    it("renders HeaderBar components without crash", () => {
        const wrapper = shallow( < HeaderBar /> );

        // HOW TO SET HERE THE STATE?
      
        expect(wrapper.find('.header-is-there').exists()).toBeTruthy();
    });

});

Answer 1

尽管有实施细节，但您的问题有两种情况：

1.State由组件本身管理

对于boolean状态，初始值为false，随后是API调用，将其值更改为true，或者由用户交互触发的事件处理程序。

您需要设置一个模拟HTTP服务器来响应API调用，或者使用fireEvent[eventName]来模拟用户交互。当状态更改时，断言组件视图将更改。

2.状态由父组件管理

@blessenm提到了这个案例。通常，状态必须由父组件传递的prop初始化。

可以传递具有不同值的道具以更改零部件的视图。