在酶中查找以类开头的 div

Question

我正在为我的 React 组件使用隔离样式。这样：

import React from 'react';
import { observer } from 'mobx-react';
import style from './book.css';
const Book = ({ name }) => {
return (
<div className={style.book_container}>
<div className={style.book}>{name}</div>
</div>
)
}
export default Book;

现在我想为此组件编写单元测试。我想检查Book组件是否已正确呈现。我通过检查呈现的标记中是否包含类book_container来做到这一点。但问题是，因为渲染的类名实际上附加了一个唯一的哈希值，如book_container_Uqwe33232。那么，鉴于哈希代码是在运行时动态生成的，我该如何做到这一点呢？

我试过了：

expect(shallow(<Book name='Harry Potter' />).find(`div[class^='book_container']`).exists()).toBe(true)

但它没有奏效。我正在运行酶版本 3.3.0。

Answer 1

由于投票摘要显示了 2020 年的投票，我认为我不是唯一一个最近遇到麻烦的人，所以我与任何人分享了一个解决方法，因为似乎不存在适当的解决方案。

我正在使用生成相同类型动态类的 Material-UI。相同的 CSS 选择器在控制台中工作，使用 Vanilla JS：

document.querySelectorAll('div[class*="makeStyles-listItem"]');

在jQuery项目中也是如此。^开头，$结尾，*包含。但是对于酶，它不起作用。我的班级有多个名字，makeStyles-listItem-168在中间。我不会假装我理解为什么它不起作用，但由于测试显式地操作 DOM，那么我使用了我的旧技术，添加了自定义属性，并带有data-[attribute_name](data-符合 w3c html 标准(：

import React from 'react';
import { observer } from 'mobx-react';
import style from './book.css';
const Book = ({ name }) => {
return (
<div className={style.book_container} data-type="book-container">
<div className={style.book}>{name}</div>
</div>
)
}
export default Book;

然后，您可以按自定义属性轻松选择：

expect(shallow(<Book name='Harry Potter' />).find(`div[data-type='book-container']`).exists()).toBe(true)

您可以将其与子字符串选择器字符(如 3^ $ *(结合使用。

Answer 2

从 Enzyme 文档中可以看出，测试浅包装器中子元素是否存在的方法是调用to.have.length(1)

来自同一页面的示例：

it('should render an `.icon-star`', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.icon-star')).to.have.length(1);
});