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

How to test a className with Jest and React testing library

提问by Giesburts

I am totally new to JavaScript testing and 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 variantprop. It also contains a className and .I would like to test that.

我对 JavaScript 测试和在新的代码库中工作完全陌生。我想编写一个测试来检查元素上的 className。我正在与 Jest 和 react-testing-library 合作。下面我有一个测试，它将根据variant道具呈现一个按钮。它还包含一个 className 和 .I 想测试它。

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 hasClassbut couldn't find anything. Does anyone know how to solve this with current libraries (react-testing-library, Jest)?

我试图用谷歌搜索像 Enzyme 这样的属性，hasClass但找不到任何东西。有谁知道如何用当前的库（react-testing-library、Jest）解决这个问题？

回答by Giorgio Polvara - Gpx

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

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

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

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

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

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

If you read more about classNamein MDNyou'll see that it returns allthe classes applied to your element separated by a space, that is:

如果您className在MDN 中阅读更多 about ，您会看到它返回应用于您的元素的所有类，以空格分隔，即：

<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.

根据您的情况，这可能不是最佳解决方案。不用担心，您可以使用其他浏览器 API，例如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.

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

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

如果检查一个类是你经常做的事情，你可以通过在你的项目中添加jest-dom来使测试更容易。

The test then becomes:

然后测试变成：

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

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

还有很多其他方便的方法toHaveStyle可以帮助你。

---

---

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 forumif you're new to JavaScript testing.

附带说明一下，react-testing-library 是一个合适的 JavaScript 测试工具。与其他库相比，它具有许多优点。如果您不熟悉 JavaScript 测试，我鼓励您加入频谱论坛。

回答by kasongoyo

You need to understand the philosophy behind react-testing-library to understand what you can do and what you can't do with it;

您需要了解 react-testing-library 背后的哲学，以了解您可以用它做什么以及您不能做什么；

The goal behind react-testing-library is for the tests to avoid including implementation details of your components and rather focus on writing tests that give you the confidence for which they are intended.

react-testing-library 背后的目标是让测试避免包含组件的实现细节，而是专注于编写测试，让您对它们的预期充满信心。

So querying element by classname is not aligned with react-testing-library philosophy as it include implementation details, the classname is actual the implementation detail of an element and is not something the end user will see and it is subjected to change at anytime in the lifecycle of the element. So instead of searching element by what user cannot see, and something that can change at anytime, just try to search by using something that the user can see such as text, label or something that will remain constant in the life cycle of the element like data-id.

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

So to answer your question, it is not adviced to test classname and hence you cannot do that with react-testing-library. Try with other test libraries such as enzymeor react-dom test utils

因此，要回答您的问题，不建议测试类名，因此您不能使用 react-testing-library 进行测试。尝试使用其他测试库，例如酶或react-dom 测试工具

回答by Manish Poduval

As mentioned by other people, you would need to use enzyme. Do set up enzyme for your application before trying out the code structure below.

正如其他人所提到的，您需要使用酶。在尝试下面的代码结构之前，请为您的应用程序设置酶。

A simple example to how to use hasclass

如何使用hasclass的一个简单例子

import React from 'react'

import CreateCode from 'modules/ReferralPage/components/CreateCode.js'

import CreateCode from 'modules/ReferralPage/components/CreateCode.js'

import { shallow } from 'enzyme';

import { shallow } from 'enzyme';

describe('<CreateCode /> component tests', () => {

describe('<CreateCode /> component tests', () => {

it('Shallow renders CreateCode component', () => {
    const wrapper = shallow(<CreateCode />).dive();
    expect(wrapper.hasClass('container')).toEqual(true);
});

});

});

Apologies for the formatting

为格式道歉

回答by Marcos Gon?alves

At first you should use a proper JavaScript Testing utility, such as:

首先，您应该使用适当的JavaScript Testing utility，例如：

• Enzyme;
• Chai (Chai-Enzume);
• so on...

• 酶;
• 柴 (Chai-Enzume);
• 很快...

Those libraries will provide you several methods to assert your application, so you could simply assert your current case like this:

这些库将为您提供多种方法来断言您的应用程序，因此您可以像这样简单地断言当前的情况：

With Enzyme:

含酵素：

const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);

Documentation: Enzyme hasClass

文档：酶 hasClass

---

---

With Chai-Enzyme:

含柴酶：

const wrapper = mount(<MyComponent />);

expect(wrapper.find('span')).to.have.className('child');
expect(wrapper.find('span')).to.not.have.className('root');

Documentation: chai-enzyme className

文档：柴酶类名