Убедитесь, что кнопка отключена в библиотеке response-testing-library

У меня есть компонент 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 и убедитесь, что ничего не произошло.

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


reactjs react-testing-library
person Nikita Sivukhin    schedule 14.06.2019    source источник
comment
Проверить, что атрибут disabled элемента кнопки верен?   -  person jonrsharpe    schedule 14.06.2019

Ответы (6)


arrow_upward
91
arrow_downward

Подтвердить, если кнопка отключена

Вы можете использовать toHaveAttribute и closest, чтобы проверить это.

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

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

or toBeDisabled

expect(getByText(/Click me/i).closest('button')).toBeDisabled();

Подтвердить, если кнопка активирована

Чтобы проверить, включена ли кнопка, используйте not следующим образом

expect(getByText(/Click me/i).closest('button')).not.toBeDisabled();
person johnny peter    schedule 14.06.2019
comment
Просто примечание: должна быть относительно свежая версия библиотеки jsdom, чтобы иметь возможность использовать функцию closest(...) в вашем примере (v 11.12.0 или выше) - person Nikita Sivukhin; 14.06.2019
comment
Обратите внимание, что toHaveAttribute требует, чтобы был установлен github.com/testing-library/jest-dom. . - person Sam; 09.12.2019
comment
Спасибо! что помогает тестировать кнопки Material-ui - person misolo; 10.09.2020
comment
Для всех, кто использует фреймворк, отличный от шутки, например Жасмин, что-то вроде этого должно сработать: expect(getByText(/Click me/i).closest('button').hasAttribute('disabled')).toBeTrue(); - person René Schubert; 17.02.2021

arrow_upward
29
arrow_downward

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

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

Пример:

<button>Submit</button>

expect(getByText(/submit/i)).toBeDisabled()
person Meysam Izadmehr    schedule 17.07.2019

arrow_upward
10
arrow_downward

Для тех, кто ищет тест, эта кнопка не отключена.

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

const { getByText } = render(Click);
expect(getByText(/Click me/i).getAttribute("disabled")).toBe(null)
person Tony Nguyen    schedule 18.06.2020

arrow_upward
3
arrow_downward

Вы можете протестировать функцию отключения кнопки, просто используя @testing-library/react следующим образом.

пример:

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

   const {getByText} = render(<Click/>)

   expect(getByText('Click me').closest('button').disabled).toBeTruthy()
person Satish    schedule 09.04.2020
comment
Мне нравится этот ответ, потому что он не зависит от другой библиотеки. Спасибо. - person Rokit; 13.01.2021

arrow_upward
1
arrow_downward

Другой способ исправить это - взять роль и проверить innerHTML, например,

const { getByRole } = render(<Click />)
const button = getByRole('button')

// will make sure the 'Click me' text is in there somewhere
expect(button.innerHTML).toMatch(/Click me/))

Это не лучшее решение для вашего конкретного случая, но его стоит держать в заднем кармане, если вам нужно иметь дело с компонентом кнопки, который не является настоящей кнопкой, например,

<div role="button"><span>Click Me</span></div>

person Yatrix    schedule 29.05.2020

arrow_upward
0
arrow_downward

toHaveAttribute - хороший вариант использования атрибута.

<button data-testid="ok-button" type="submit" disabled>ok</button>

const button = getByTestId('ok-button')
//const button = getByRole('button');

expect(button).toHaveAttribute('disabled')
expect(button).toHaveAttribute('type', 'submit')
expect(button).not.toHaveAttribute('type', 'button')

expect(button).toHaveAttribute('type', expect.stringContaining('sub'))
expect(button).toHaveAttribute('type', expect.not.stringContaining('but'))

Надеюсь, это будет полезно.

person Ultimate Fire    schedule 06.07.2021