如何使用 Jest 和 React 測試庫測試 className

Question

我對 JavaScript 測試完全陌生，並且正在使用新的代碼庫。 我想編寫一個測試來檢查元素上的 className。 我正在使用 Jest 和React 測試庫。 下面我有一個測試，它將根據variant道具呈現一個按鈕。 它還包含一個類名，我想對其進行測試。

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

我試圖用谷歌搜索像 Enzyme 與hasClass一樣的屬性，但我找不到任何東西。 如何使用當前的庫（ React 測試庫和 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 測試，我鼓勵您加入頻譜論壇。

Answer 2

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

react-testing-library背后的目標是讓測試避免包含組件的實現細節，而是專注於編寫測試，讓您對它們的預期充滿信心。

因此，按類名查詢元素與react-testing-library哲學不符，因為它包含實現細節。 類名實際上是元素的實現細節，不是最終用戶會看到的，並且在元素的生命周期中隨時會發生變化。

因此，與其通過用戶看不到的東西以及可以隨時更改的東西來搜索元素，不如嘗試使用用戶可以看到的東西來搜索，例如文本、標簽或在元素的生命周期中保持不變的東西像數據ID。

因此，要回答您的問題，不建議測試 classname，因此您不能使用react-testing-library 進行測試。 嘗試使用其他測試庫，例如Enzyme或react-dom test utils 。

Answer 3

該庫可以訪問普通的 DOM 選擇器，因此我們也可以簡單地這樣做：

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

Answer 4

您可以使用 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 5

您可以使用來自 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 和 append ，該 div 到document.body ，這是你的 React 組件將被渲染的地方。 如果您通過此選項提供自己的HTMLElement容器，它不會自動附加到document.body 。

Answer 6

    // 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);
  });
});

Answer 7

簡單地說，你應該使用 toHaveClass from Jest 無需添加更多邏輯

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)
})

Answer 8

正如其他人所提到的，您將需要使用酶。 在嘗試下面的代碼結構之前，請為您的應用程序設置酶。

一個簡單的例子，如何使用hasclass

import React from 'react'

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

import { shallow } from 'enzyme';

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

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

});

道歉的格式

Answer 9

首先，您應該使用適當的JavaScript Testing utility ，例如：

• 酶 ;
• 柴（Chai-Enzume） ;
• 等等...

這些庫將為您提供幾種方法來聲明您的應用程序，因此您可以像這樣簡單地聲明當前情況：

含酶：

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

文檔： 酶hasClass

---

使用柴酶：

const wrapper = mount(<MyComponent />);

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

文檔： chai-酶className