查詢 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元素只是一個容器，對最終用戶沒有任何意義，另一方面，其中的輸入是用戶將要與之交互的元素，這意味着它們應該是被測試的元素行為和可見性。