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

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

如果有人在寻找解决方案，通过Id或class在React Testing Library中使用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添加数据testid或在每个必需的标记中添加测试Id来测试任何类或基于Id的测试
那么getByTestId & querySelector
我希望它能帮助你。

Answer 2

您可以使用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');
});
});