React Testing Library如何校验查询到的DOM元素标签类型？

问题场景 #

需要补全测试用例中的断言，校验已经通过screen.getByText(/Hello world/i)获取到的元素确实是h1标签。

待测试组件 App.js #

function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

待补全测试代码 App.test.js #

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

test('is hello world inside the h1 tag', () => {
  render(<App />);
  const titleElement = screen.getByText(/Hello world/i);
  /* 我想要校验titleElement是否为h1标签 */
  expect(titleElement)...
});

实现方案 #

你可以任选以下一种方式补全断言：

• 直接读取DOM元素原生的tagName属性判断，注意DOM规范中tagName返回值为全大写的标签名：

expect(titleElement.tagName).toBe('H1');

• 如果项目已引入@testing-library/jest-dom扩展（React Testing Library官方脚手架创建的项目默认预装），可以使用更贴合语义化测试思路的toHaveRole断言：h1标签默认对应的ARIA角色为heading，层级为1：

expect(titleElement).toHaveRole('heading', { level: 1 });

实践建议：更推荐在查询元素阶段就通过角色限定匹配范围，从查询源头避免取错元素，不需要额外追加标签校验，写法如下：

const titleElement = screen.getByRole('heading', { 
  name: /hello world/i, 
  level: 1 
});

内容的提问来源于stack exchange，提问作者BK52