Question

我正在测试的代码具有

<div className="foo">
    {this.props.foo ? "foo!" : ""}
</div>

我想像这样测试它：

it('shows no foo by default', () => {
    const wrapper = mount(
        <MyComponent/>
    );
    expect(wrapper).to.containMatchingElement(
        <div class="foo"/>
    );
});

但是，即使输出显示了我的元素，它也从未找到该元素并且测试失败：

AssertionError：预期<MyComponent />包含匹配的<div class="foo" />
    HTML:
    ...
    <div>
      <div class="foo"></div>
    </div>

我如何断言具有给定类的<div>在输出中？

Answer 1

it('shows no foo by default', () => {
    const wrapper = shallow(
        <MyComponent />
    );
    expect(wrapper.find(".foo")).doTestHere(
        <div class="foo"/>
    );
});

尝试一下。

您想要尝试的方式应该是这样

expect(wrapper.containsMatchingElement(<div class="foo"></div>)).to.equal(true);

您编写的考试不完整

Answer 2

containsMatchingElement是酶的一种方法，而expect是Chai的一种方法。

因此这两种方法不兼容：

expect(wrapper).to.containsMatchingElement(<div class="foo"></div>); // incompatible!

您应该使用以下方法：

expect(wrapper.containsMatchingElement(<div class="foo"></div>)).to.be.true; // good

如何检查具有特定类的元素？

2 个答案: