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

javascript reactjs jestjs react-testing-library

2022-08-30 04:22:42

我对JavaScript测试完全陌生，并且正在使用新的代码库。我想写一个测试，检查元素上的类名。我正在使用Jest和React测试库。下面我有一个测试，它将根据道具呈现一个按钮。它还包含一个类名，我想测试一下。variant

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

我试图谷歌像酶一样的财产，但我找不到任何东西。我如何使用当前的库（React测试库和Jest）解决这个问题？hasClass

答案 1

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

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

因此，如果您想知道将哪个类应用于，则可以像这样操作。container.firstChildcontainer.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测试的新手。

答案 2

该库允许访问正常的DOM选择器，因此我们也可以简单地执行此操作：

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