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

Question

我是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）解决此问题？

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测试实用程序。与其他库相比，它具有许多优势。如果您不熟悉JavaScript测试，建议您加入Spectrum论坛。

Answer 2

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

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

Answer 3

您可以使用 testing-library/jest-dom 自定义匹配器。

@testing-library/jest-dom 库提供了一组可用于扩展 jest 的自定义 jest 匹配器。这些将使您的测试更具声明性，更易于阅读和维护。

https://github.com/testing-library/jest-dom#tohaveclass

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

    expect(container.firstChild).toHaveClass('class-you-are-testing') 
})

这可以在setupTest.js文件中全局设置

import '@testing-library/jest-dom/extend-expect';
import 'jest-axe/extend-expect';
// etc

Answer 4

你应该使用toHaveClassJest 的。无需添加更多逻辑。

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.firstChild).toHaveClass(add you className);
    // You can also use screen instead of container because container is not recommended as per Documentation 
    expect(screen.getByRole('button')).toHaveClass(add you className)
})

Answer 5

您需要了解react-testing-library背后的哲学，以了解您可以做什么和不能做什么。

react-testing-library的目标是使测试避免包括组件的实现细节，而专注于编写使您有信心使用的测试。

因此按类名查询元素不符合react-testing-library哲学，因为它包含实现细节，类名实际上是元素的实现细节，不是最终用户会看到的东西，并且随时可能在其中发生变化。元素的生命周期。因此，与其尝试按用户看不见的内容搜索元素，而且可以随时更改的内容，不如尝试使用用户可以看到的内容（例如文本，标签或在元素生命周期中保持不变的内容）进行搜索。数据ID。

因此，要回答您的问题，不建议您测试类名，因此您不能使用react-testing-library来做到这一点。尝试使用其他测试库，例如酶或反应测试工具

Answer 6

您可以使用 jest DOM 中的 toHaveClass

it('renders textinput with optional classes', () => {
  const { container } = render(<TextArea {...props} className='class1' />)
  expect(container.children[1]).toHaveClass('class1')
})

不要忘记像这样解构响应，{container}因为默认情况下，React 测试库将创建一个 div 并将该 div 附加到document.body，这就是您的 React 组件将被渲染的地方。如果您通过此选项提供自己的HTMLElement容器，它将不会document.body自动附加到。