Question

说我有

const BaseComponent = (props) => {
    const classNames = ['base-component', props.className];
    return (
        <div className={classNames.join(' ')}>
            {props.children}
        </div>
    )
};

const SomeComponent = () => {
    return (
        <BaseComponent
            className="foo-bar"
        >
            Hello
        </BaseComponent>
    );
}

此处渲染的dom为<div class="base-component foo-bar">Hello</div>

现在，如果我浅层挂载SomeComponent并测试类，则只有foo-bar可用：

const dom = shallow(<SomeComponent/>);
console.log(dom.hassClass('base-component')); // comes out as false

我了解只有foo-bar作为类传递给SomeComponent，但我如何验证所有其他类呢？

Answer 1

如果您使用.prop API。

，该怎么办？

expect(dom.find('div').prop('className'))
  .to.be.equal('base-component foo-bar');

Answer 2

shallow()仅渲染不包含其他类的顶级组件。您可以使用dive()让它将一个组件渲染得更深一层。 dive()呈现调用它的包装器中唯一一个非DOM子项。

const dom = shallow(<SomeComponent/>);
console.log(dom.dive().hasClass('base-component')); // now comes out as true

如果您想检查整个DOM，则必须使用render()而不是shallow()。

同样，html()上对ShallowWrapper的调用总是会返回完整渲染的标记，无论它是否为浅渲染。

React Enzyme即使被其他组件传递也会获得所有类

2 个答案: