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

我对 JavaScript 测试完全不熟悉，正在一个新的代码库中工作。我想编写一个测试，检查元素上的 className。我与杰斯特和 Ref = “ https://testinglibrary. com/docs/response-testinglibrary/intro/”rel = “ noReferrer”> React TestingLibrary 一起工作。下面我有一个测试，将呈现一个按钮的基础上的 variant道具。它还包含一个 className，我想测试一下。

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

我试图谷歌一个属性像酶与 hasClass，但我无法找到任何东西。如何使用当前库(反应测试库和 Jest)解决这个问题？

268619 次浏览
小开
最佳答案

您可以很容易地使用 response-testing- 库来实现这一点。

首先，您必须理解 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，只适用于测试。它就像在浏览器中一样。

如果检查一个类是你经常做的事情，你可以通过将 开玩笑的添加到你的项目来简化测试。

接下来的考验就是:

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

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

顺便说一句，response-testing- 库是一个正确的 JavaScript 测试工具。与其他库相比，它有许多优点。如果你是 JavaScript 测试的新手，我鼓励你加入 频谱论坛。

小开

你需要理解 反应-测试-库背后的哲学，才能理解你能做什么，不能用它做什么;

反应-测试-库背后的目标是让测试避免包含组件的实现细节，而是将重点放在编写测试上，使您对测试的目的有信心。

因此，按类名查询元素并不符合 反应-测试-库的原理，因为它包含了实现细节。类名实际上是元素的实现细节，最终用户不会看到，并且在元素生命周期的任何时候都会发生变化。

因此，不要用用户看不到的东西来搜索元素，也不要用用户随时可能改变的东西来搜索，而是试着用用户可以看到的东西来搜索，比如文本、标签或者在元素的生命周期中保持不变的东西，比如 data-id。

因此，为了回答您的问题，建议不要测试 classname，因此不能使用 反应-测试-库进行测试。尝试使用其他测试库，如 酶或 反应测试实用程序。

小开

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

@ test-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
小开

这个库提供了对普通 DOM 选择器的访问，所以我们也可以简单地这样做:

it('Renders with a className equal to the variant', () => {
const { container } = render(<Button variant="default" />)
expect(container.getElementsByClassName('default').length).toBe(1);
});
小开 
    // Link.react.test.js
import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
import App from './../../src/App'
describe('React', () => {
it('className', () => {
const renderer = new ShallowRenderer();
renderer.render(<App />);
const result = renderer.getRenderOutput();
expect(result.props.className.split(' ').includes('welcome-framework')).toBe(true);
});
});
小开

你应该使用来自 Jest 的 toHaveClass。不需要添加更多的逻辑。

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 You Screen Instead Of Using Container Container Not Recommended To Use As Documentation Said
expect(screen.getByRole('button')).toHaveClass(add you className)
})
小开

您可以从 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。


提交答案