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

我是JavaScript测试的新手,并且在新的代码库中工作.我想编写一个在元素上检查className的测试.我正在与Jest和React-Testing-Library合作.下面,我有一个测试,它将根据变体道具渲染一个按钮.它还包含一个className和.我想测试一下.

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

我试图在Google上搜索具有hasClass的Enzyme之类的属性,但是找不到任何东西.有谁知道如何使用当前库(react-testing-library,Jest)解决此问题？

解决方法:

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

首先,您必须了解容器或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 forum.

标签：javascript,reactjs,jestjs,react-testing-library
来源： https://codeday.me/bug/20191010/1887336.html