查询React测试库中的React根元素

Question

在我的React组件中，当您按下/而专注于document时，id为#keys的div从display: none变为display: flex。

我用Jest和React测试库写了一个测试:

App.tsx:

return (
<div id="keys" style={{ display: isInputFocused ? 'flex' : 'none' }}>
<input
type="text"
ref={inputRef}
onChange={handleInputChange}
onBlur={handleInputBlur}
value={inputValue}
/>
<!-- more elements -->
</div>
);

App.test.tsx:

test('`input` is visible after pressing `/`', () => {
render(<App />);
fireEvent.keyDown(document, { key: '/' });
const input = screen.getByRole('textbox', { hidden: true });
expect(input).toBeVisible();
});

正如您所看到的，在我的测试中，我在#keys而不是#keys中查询input。如果我想以RTL方式查询#keys，我必须将role或data-testid添加到#keys。

问题1:这是查询#keys的最佳方式?所以我测试#keys的可见性，而不是input里面吗?(不需要添加role或data-testid吗?)

问题2:或者根据RTL的理念，我不应该测试#keys，而是测试input?

Answer 1

1 -你仍然可以使用"normal"尽管不建议使用RTL中的dom查询，正如docs中提到的那样:

const { container } = render(<MyComponent />)
const keys = container.querySelector('#keys');

您也可以使用parentElement或parentNode，但我认为这与上面的

属于同一类别

const keys = screen.getByRole('textbox').parentElement;

2 -正如你所怀疑的，RTL的理念是查询和测试对你的应用程序用户可见和重要的元素，这意味着如果你无法用高优先级查询来查询这些元素您要么不需要测试它们，要么需要改进它们的可访问性:

RTL文档(从我共享的第一个链接)

请注意，不建议使用它作为按类或id查询的逃生舱口，因为它们对用户是不可见的。

你的keys元素只是一个容器，对最终用户没有任何意义，另一方面，它里面的输入是用户将要与之交互的元素，这意味着它们应该是被测试行为和可见性的元素。