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

Question

在我的 React 组件中，一个带有 id #keys的div从display: none到display: flex当你按下/并关注document时。

我使用 Jest 和 React 测试库为此编写了一个测试：

应用程序.tsx：

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

应用程序.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 - 您仍然可以在 RTL 中使用“普通”dom 查询，尽管如文档中所述不推荐这样做：

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

您也可以使用parentElement或parentNode但我认为它们属于与上述相同的类别

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

2 - 正如您所怀疑的那样，RTL 的理念是查询和测试对您的应用程序用户可见且重要的元素，这意味着如果您无法使用高优先级查询查询这些元素，则您要么不需要测试它们，要么您需要提高他们的可及性：

RTL 文档（来自我分享的第一个链接）

请注意，不建议将其用作逃生舱口以通过 class 或 id 进行查询，因为它们对用户不可见。

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