问用className测试反应组件和获取元素
EN

Stack Overflow用户

提问于 2021-07-11 12:52:21

回答 2查看 8.4K关注 0票数 5

我想知道，仅仅为了可读性和测试，将新的类名放入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
})

仅仅为了可读性/调试/测试而使用“空”类是个坏主意吗？在测试时找到元素的最佳方法是什么？

testing

classname

testing-library

reactjs

回答 2

Stack Overflow用户

发布于 2022-07-21 22:51:20

如果有人在寻找通过Id、或类在中选择的解决方案，则使用Screen对测试库做出反应。

那就查查这个

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

您可以通过在组件级别上向父div添加数据或在每个必需标记中添加测试Id来测试任何类或id基测试。

然后是getByTestId & querySelector

我希望它能帮到你。

票数 3

Stack Overflow用户

发布于 2022-11-08 15:24:20

您可以使用document.querySelector(...)查询已挂载的任何内容。参见下面的示例。

import React from 'react';
import { render } from '@testing-library/react';

describe('Query by ID', () => {
  it('Using querySelector', async () => {
    render(
      <div className="componentClassName" id="componentId">
        component
      </div>
    );
    const component = document.querySelector('#componentId');

    expect(component).toHaveClass('componentClassName');
  });
});