代码之家 › 专栏 › 技术社区 › Robert

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

chai reactjs

Robert · 技术社区 · 8 年前

我的测试代码

<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"/>
    );
});

但是,它从未找到元素,并且测试失败,即使输出显示我的元素:

断言错误:应为 <MyComponent /> 包含匹配 <div class="foo" />
    HTML:
    ...
    <div>
      <div class="foo"></div>
    </div>

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

2 回复 | 直到 8 年前

Shubham Agarwal Bhewanewala 8 年前

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);

你写了不完整的测试

n8o 8 年前

containsMatchingElement 是一种酶的方法,但是 expect 是柴的一种方法。

因此,这两种方法是不兼容的:

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

你应该这样使用这些方法:

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

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前