javascript - 如何使用 Jest 和 React 测试库测试类名

Question

我是 JavaScript 测试的新手，正在新的代码库中工作。我想编写一个测试来检查元素上的类名。我正在和 Jest 一起工作， React Testing Library 。下面我有一个测试，它将根据 variant 属性呈现一个按钮。它还包含一个类名，我想测试一下。

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 测试库 和 Jest)解决这个问题？

Answer 1

您可以使用 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 测试工具。与其他库相比，它具有许多优点。我鼓励你加入 spectrum forum如果您不熟悉 JavaScript 测试。