测试 React 组件并通过 className 获取元素

Question

我想知道是否将新的类名放入 html 组件中只是为了可读性和测试是否可以。假设我们有这样的情况：

class ComponentOne extends React.Component {

    render(){
        <div>
           <div>
              <div className="lower">
                 {sometext}
              </div>
            </div>
        </div>
    }

}

这些类在这里只是为了提高浏览器的可读性以及更好地测试该组件。像这样 ：

import { render } from '@testing-library/react'
it("Testing ComponentOne", ()=>{
   const { container } = render(<Component/>)
   const element = container.querySelector(".lower") // cleaner element searching
   // testing element's text here
})

在 React 中仅出于可读性/调试/测试目的使用“空”类是一个坏主意吗？在测试时查找元素的最佳方法是什么？

Answer 1

如果有人在使用Screen 的React 测试库中寻找一种通过Id或Class进行选择的解决方案。 然后检查这个

class ComponentOne extends React.Component {
    render(){
        <div data-testid='main-component'>
           <div>
              <div className="lower">
                 {sometext}
                 <span id='spanid'> sometext2</span>
                 <div className="lower2">
                    {sometext3}
                 </div>
              </div>
            </div>
        </div>
    }
}

那么我们就可以实现这样的目的：

  import { render } from '@testing-library/react'
        it("Testing ComponentOne", ()=>{
           render(<Component/>)
    // testing element's text here
           const element = screen.getByTestId('main-component').querySelector(".lower") //select lower div
           expect(element).toHaveTextContent('sometext') 
    //Testing with Id
           const spanElement = screen.getByTestId('main-component').querySelector("#spanid") //select lower div
           expect(spanElement).toHaveTextContent('sometext2') 
    //Testing with nested class 
           const nestedElement = screen.getByTestId('main-component').querySelector(".lower.lower2") //select lower2 div
           expect(nested).toHaveTextContent('sometext3') class 
        })

您可以通过将data-testid添加到组件级别的父 div 或通过在每个必需标签中添加测试 id 来测试任何类或 Id 基本测试。
那么getByTestId & querySelector
我希望它能帮助你。