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 docs看来，测试浅包装中是否存在子元素的方法是调用to.have.length(1)

同一页面上的示例：

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

从``酶''中的课程开始查找div

2 个答案: