检查按钮是否在反应测试库中被禁用

Question

我有一个 React 组件，它生成一个按钮，其内容包含

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

我想通过使用反应测试库和摩卡茶来测试这个组件的逻辑。

我目前遇到的问题是getByText（“Click me”）选择器返回

1. 对使用data test id

你能建议一个更好的方法吗？




Answer 1

对于正在寻找按钮没有被禁用的测试的人。

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

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

Answer 2

您可以使用toBeDisabled（）从@testing-library/jest-dom，它是一个自定义jest匹配器，用于测试dom的状态：

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

例：

html prettyprint-override"><button>Submit</button>

expect(getByText(/submit/i)).toBeDisabled()

Answer 3

如果按钮被禁用，则断言

您可以使用toHaveAttribute和最接近的来测试它。

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

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

或toBeDisabled

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

启用按钮时断言

要检查按钮是否启用，请使用not，如下所示

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