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

【问题标题】：Check that button is disabled in react-testing-library检查按钮在 react-testing-library 中是否被禁用
【发布时间】：2019-10-28 20:03:12
【问题描述】：

我有一个生成按钮的 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 节点，但是对于测试，我需要检查<button> 节点的disable 属性。处理此类测试用例的最佳实践是什么？我看到了几个解决方案，但听起来都有些不对劲：

将data-test-id 用于<button> 元素
选择<Click />组件的祖先之一，然后选择按钮within(...)这个范围
用fireEvent点击选中的元素并检查是否没有发生任何事情

您能提出更好的方法吗？

【问题讨论】：

测试button元素的disabled属性为真？

标签： reactjs react-testing-library

【解决方案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();

【讨论】：

请注意：必须有 jsdom 库的相关新版本才能在您的示例中使用 closest(...) 函数（v 11.12.0 或更高版本）
请注意，toHaveAttribute 要求安装 github.com/testing-library/jest-dom。
谢谢！这有助于测试 Material-ui 按钮
适用于使用与 jest 不同的框架的每个人，例如Jasmine，这样的事情应该可以完成工作：expect(getByText(/Click me/i).closest('button').hasAttribute('disabled')).toBeTrue();
虽然这个答案有效，但我个人觉得它不符合 react-testing-library 的精神。我在下面提供了一个替代答案，对我来说，它更符合 rtl（不是说更好或更坏，只是一种替代方法）

【解决方案2】：

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

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

例子：

<button>Submit</button>

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

【讨论】：

【解决方案3】：

对于寻找测试按钮的人未禁用。

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

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

【讨论】：

【解决方案4】：

我会礼貌地争辩说您正在测试一个实现细节，而 react-testing-library 不鼓励这样做。

您的测试与您的软件使用方式越相似，它们能给您的信心就越大。

如果按钮被禁用，用户不会看到禁用的道具，而是什么都没有发生。如果启用按钮，用户不会看到禁用的道具遗漏，而是看到发生了一些事情。

我认为您应该对此进行测试：

const Button = (props) => (
  <button 
    type="submit" 
    onClick={props.onClick} 
    disabled={props.disabled}
  >
    Click me
  </button>
);

describe('Button', () => {
  it('will call onClick when enabled', () => {
    const onClick = jest.fn();
    render(<Button onClick={onClick} disabled={false} />);
    userEvent.click(getByRole('button', /click me/i));
    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('will not call onClick when disabled', () => {
    const onClick = jest.fn();
    render(<Button onClick={onClick} disabled={true} />);
    userEvent.click(getByRole('button', /click me/i));
    expect(onClick).not.toHaveBeenCalled();
  });
})

【讨论】：

好点！尽管我认为在禁用按钮的情况下，您可以牺牲概念的纯度并测试“实现细节”，特别是当您测试 disabled 属性时，该属性是具有固定行为的 HTML 规范的一部分。您能否提供一些示例来说明测试disabled 道具的缺点和模拟click 回调的优点，只是为了我的兴趣？

【解决方案5】：

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'))

希望这会有所帮助。

【讨论】：

【解决方案6】：

您可以通过使用@testing-library/react 来测试按钮的禁用属性，如下所示。

示例：

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

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

   expect(getByText('Click me').closest('button').disabled).toBeTruthy()

【讨论】：

我喜欢这个答案，因为它不依赖于另一个库。谢谢。

【解决方案7】：

解决此问题的另一种方法是抓住角色并检查 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>

【讨论】：