在 React 测试库中按类名查找元素

Find elements by className in React Testing Library

在 React 测试库中通过 className 查找元素：

渲染组件并container从结果中解构对象。
使用getElementsByClassName()容器上的方法按类名查找元素。

应用程序测试.js


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

test('renders react component', () => {
  const {container} = render(<App />);

  // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
  const boxes = container.getElementsByClassName('box');

  console.log(boxes.length); // 👉️ 2

  expect(boxes.length).toBe(2);
});

这是App示例中的组件。

应用程序.js


export default function App() {
  return (
    <div>
      <div className="box">Box 1</div>

      <div className="box">Box 2</div>
    </div>
  );
}

我们可以在渲染组件后获得的对象getElementsByClassName上使用该方法。container

应用程序测试.js


// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const boxes = container.getElementsByClassName('box');

但是，请注意，我们必须禁用一些 linting 规则，因为这不是 React 测试库的预期使用方式。

文档声明我们应该避免测试实现细节（我们应用程序的用户不知道的事情），例如类名。

这可能不适用于您的用例，根据您需要执行的操作，按类名选择元素可能是最佳解决方案。

如果你需要在 React 中通过类名查找所有元素，请点击
下面的文章。

测试一个元素是否有一个特定的类

如果你需要测试一个元素是否有一个特定的类，你可以通过它的文本选择元素并检查类的存在。

应用程序.js


import {render, screen} from '@testing-library/react';
import App from './App';

test('renders react component', async () => {
  render(<App />);


  const boxes = await screen.findAllByText(/box/i);

  expect(boxes[0]).toHaveClass('box');
  expect(boxes[1]).toHaveClass('box');
});

我们使用该findAllByText方法来选择包含文本的所有元素
box。

请注意，我们能够将正则表达式传递给该方法。

您可以在其文档的这一部分查看 React 测试库的查询优先级列表
。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：