如何在酶中使用html并做出反应？

Question

我的<Header />组件在移动视图中获得了课程collapsed。我想编写测试移动视图方案的测试

it('should render mobile view', () => {

    const wrapper = mount(
        <div style={{width: '700px'}}>
            <Header content={headerData} useDOMNodeWidth={true} />
        </div>
    );

    expect(wrapper.find('.header-component').first().hasClass('collapsed')).to.equal(true);
});

运行测试后我有一个AssertionError，所以似乎渲染时出现问题。我假设render方法只接受干净的反应组件。

我知道如何测试吗？

Answer 1

标头组件可能会根据某些条件呈现移动视图。在呈现它之前/之前，您必须在Header组件中注入该条件。

例如：我在Web门户上有组件，根据客户类型显示不同的徽标。在渲染组件之前，将在我的appConfig中设置此客户类型。