检查按钮在 react-testing-library 中是否被禁用

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 点击选中的元素并检查是否没有发生任何事情

你能推荐一个更好的方法吗？

原文由 Nikita Sivukhin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

断言按钮是否被禁用

您可以使用 toHaveAttribute 和 closest 来测试它。

 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();

原文由 johnny peter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 toBeDisabled() 来自 @testing-library/jest-dom ，它是一个自定义的笑话匹配器来测试 DOM 的状态：

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

例子：

 <button>Submit</button>

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

原文由 Meysam Izadmehr 发布，翻译遵循 CC BY-SA 4.0 许可协议