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

Posted 2023-02-19

【中文标题】检查按钮在 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属性为真？

【参考方案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>