React Testing Library中查询#keys元素及测试逻辑的疑问

1. 不添加role或data-testid时，查询#keys元素的最优方式 #

如果不想额外给元素加标识，直接用它的id是最直接的方案。你可以通过两种方式获取元素并验证可见性：

• 用原生DOM API：

const keysContainer = document.getElementById('keys');
expect(keysContainer.style.display).toBe('flex');

• 用React Testing Library提供的screen.querySelector：

const keysContainer = screen.querySelector('#keys');
expect(keysContainer).toHaveStyle('display: flex');

需要注意的是，这种直接查询DOM结构的方式，优先级低于RTL推荐的语义化查询（比如基于角色、文本的查询），但在已有明确id的场景下完全可行。

2. 按照RTL的设计理念，应该测试什么？ #

React Testing Library的核心是测试用户实际能感知、能交互的内容，而非组件内部的DOM结构细节。用户按下/键的目标是激活输入功能，他们根本不会在意外层#keys容器的display属性，只会关心能不能看到输入框、能不能输入内容。

所以按照RTL的设计理念，你应该测试内部的input元素：比如按下/键后，input是否变为可见、是否能正常获取焦点等。这种测试更贴近真实用户行为，也更健壮——哪怕后续你修改了外层容器的结构（比如把div换成section），只要输入框的交互逻辑没变，测试依然能通过。

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