Убедитесь, что кнопка отключена в реагирующей на тестирование библиотеке

Question

У меня есть компонент React, который генерирует кнопку, содержимое которой содержит <span> элемент, подобный этому:

function Click(props) {
    return (
        <button disable={props.disable}>
            <span>Click me</span>
        </button>
    );
}

Я хочу проверить логику этого компонента с использованием react-testing-library иmocha + chai.

Проблема, с которой я столкнулся на данный момент, заключается в том, что селектор getByText("Click me") возвращает узел <span> DOM, но для тестов мне нужно проверить атрибут disable<button> узел.Какова лучшая практика обработки таких тестов?Я вижу пару решений, но все они звучат немного не так:

1. Использование data-test-id для <button> элемента
2. Выберите одного из предков <Click /> компонент и затем выберите кнопку within(...) эту область действия
3. Нажмите на выбранный элемент с помощью fireEvent и убедитесь, что ничего не произошло

Можете ли вы предложить лучший подход?

Answer 1

Вы можете использовать toHaveAttribute и closest для проверки.

import { render } from '@testing-library/react';

const { getByText } = render(Click);
expect(getByText(/Click me/i).closest('button')).toHaveAttribute('disabled');

Answer 2

Вы можете использовать toBeDisabled из esting-library/jest-dom, это нестандартный шутник для проверки состояния DOM:

https://github.com/testing-library/jest-dom