如何使用 Jest 和 React 测试库测试 className [英] How to test a className with the Jest and React testing library

问题描述

我对 JavaScript 测试完全陌生，正在使用新的代码库.我想编写一个测试来检查元素上的 className.我正在使用 Jest 和 React 测试库.下面我有一个测试，它将基于 variant 道具呈现一个按钮.它还包含一个 className，我想测试一下.

it('以与变体相同的类名渲染', () => {const { 容器 } = 渲染(<按钮变体=默认"/>)expect(container.firstChild)//在这里检查 className})

我试图用 hasClass 搜索像 Enzyme 这样的属性，但我找不到任何东西.我如何使用当前的库(React 测试库 和 Jest)解决这个问题?

解决方案

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

首先，你要明白container或者getByText等的结果仅仅是DOM节点.您可以像在浏览器中一样与他们互动.

所以，如果你想知道什么类应用于container.firstChild，你可以像这样container.firstChild.className.

如果您在 MDN 你会看到它返回所有应用到你元素的类，用空格隔开，即:

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

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

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

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

如果检查一个类是你经常做的事情，你可以通过添加 jest-dom<使测试更容易/a> 到您的项目.

然后测试变成:

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

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

<小时>

顺便提一下，react-testing-library 是一个合适的 JavaScript 测试工具.与其他库相比，它具有许多优点.如果您不熟悉 JavaScript 测试，我鼓励您加入 spectrum 论坛.

I am totally new to JavaScript testing and am working in a new codebase. I would like to write a test that is checking for a className on the element. I am working with Jest and React Testing Library. Below I have a test that will render a button based on the variant prop. It also contains a className and I would like to test that.

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

I tried to google for a property like Enzyme has with hasClass, but I couldn't find anything. How can I solve this with the current libraries (React Testing Library and Jest)?

解决方案

You can easily do that with react-testing-library.

First, you have to understand that container or the result of getByText etc. are merely DOM nodes. You can interact with them in the same way you would do in a browser.

So, if you want to know what class is applied to container.firstChild you can just do it like this container.firstChild.className.

If you read more about className in MDN you'll see that it returns all the classes applied to your element separated by a space, that is:

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

This might not be the best solution depending on your case. No worries, you can use another browser API, for example classList.

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

That's it! No need to learn a new API that works only for tests. It's just as in the browser.

If checking for a class is something you do often you can make the tests easier by adding jest-dom to your project.

The test then becomes:

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

There are a bunch of other handy methods like toHaveStyle that could help you.

---

As a side note, react-testing-library is a proper JavaScript testing utility. It has many advantages over other libraries. I encourage you to join the spectrum forum if you're new to JavaScript testing.

这篇关于如何使用 Jest 和 React 测试库测试 className的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！