开发者问题收集

如何使用 Jest 和 React 测试库测试 className

2018-11-20
429044
javascript reactjs jestjs react-testing-library

我对 JavaScript 测试完全陌生，正在使用新的代码库。我想编写一个测试来检查元素上的 className。我正在使用 Jest 和 React Testing Library 。下面我有一个测试，它将根据 variant 属性呈现一个按钮。它还包含一个 className，我想测试它。 

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.firstChild) // Check for className here
})

我试图在 Google 上搜索像 Enzyme 那样的 hasClass 属性，但我什么也没找到。如何使用当前库（ React Testing Library 和 Jest）解决这个问题？

3个回答

您可以使用 react-testing-library 轻松做到这一点。

首先，您必须了解 container 或 getByText 的结果等仅仅是 DOM 节点。您可以像在浏览器中一样与它们进行交互。

因此，如果您想知道应用于 container.firstChild 的类是什么，您可以像这样执行 container.firstChild.className 。

如果您在 MDN 中阅读有关 className 的更多信息，您会看到它返回应用于您的元素的 所有 类，并以空格分隔，即： 

<div class="foo">     => className === 'foo'
<div class="foo bar"> => className === 'foo bar'

根据您的情况，这可能不是最好的解决方案。不用担心，您可以使用其他浏览器 API，例如 classList 。 

expect(container.firstChild.classList.contains('foo')).toBe(true)

就是这样！无需学习仅适用于测试的新 API。就像在浏览器中一样。

如果您经常检查某个类，您可以通过将 jest-dom 添加到您的项目中来简化测试。

然后测试变为： 

expect(container.firstChild).toHaveClass('foo')

还有许多其他方便的方法，例如 toHaveStyle 可以帮助您。

顺便说一句，react-testing-library 是一个合适的 JavaScript 测试实用程序。与其他库相比，它具有许多优势。如果您是 JavaScript 测试新手，我鼓励您加入 spectrum 论坛 。

Gio Polvara
2018-11-20

该库可以访问普通的 DOM 选择器，因此我们也可以简单地这样做： 

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.getElementsByClassName('default').length).toBe(1);
});
jbmilgrom
2020-12-03

您需要理解 react-testing-library 背后的哲学，才能理解您可以用它做什么和不能用它做什么；

react-testing-library 背后的目标是让测试避免包含组件的实现细节，而是专注于编写能够让您对预期目标充满信心的测试。

因此，通过类名查询元素与 react-testing-library 哲学不一致，因为它包含了实现细节。类名实际上是元素的实现细节，并不是最终用户会看到的内容，并且在元素的生命周期中随时都可能发生变化。

因此，不要通过用户看不到的内容和随时可能发生变化的内容来搜索元素，而是尝试使用用户可以看到的内容进行搜索，例如文本、标签或在元素生命周期中保持不变的内容，例如 data-id。

因此，回答您的问题，不建议测试类名，因此您不能使用 react-testing-library 来执行此操作。尝试使用其他测试库，例如 Enzyme 或 react-dom test utils 。

kasongoyo
2019-05-28