检查按钮在 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") select 或 returns <span> DOM 节点，但对于测试，我需要检查 <button> 节点的 disable 属性。处理此类测试用例的最佳做法是什么？我看到了几个解决方案，但它们听起来都有点不对劲：

对 <button> 元素使用 data-test-id
Select <Click /> 组件的祖先之一，然后 select 按钮 within(...) 这个范围
单击带有 fireEvent 的 selected 元素并检查没有发生任何事情

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

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

Answer 2

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

的状态

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

示例：

<button>Submit</button>

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

Answer 3

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

示例：

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

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

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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

希望这会有所帮助。

Answer 7

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

The more your tests resemble the way your software is used, the more confidence they can give you.

如果按钮被禁用，用户不会看到禁用的道具，而是什么也看不到。如果启用了一个按钮，用户不会看到禁用的 prop 的遗漏，相反他们会看到一些事情发生了。

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

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

Answer 8

我的解决方案，在我看来，这个案例很好地涵盖了必要的内容。检查按钮是否被禁用，因此 toHaveBeenCalledTimes 必须接收 0

 test('Will not call onClick when disabled', () => {
        const mockHandler = jest.fn()

        render(<Button title="Disabled account" disabled={true} onClick={mockHandler} />)
        const button = screen.getByText("Disabled account")
        fireEvent.click(button)

        expect(mockHandler).toHaveBeenCalledTimes(0)
        expect(button).toHaveProperty('disabled', true)
    })

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

Check that button is disabled in react-testing-library

reactjs

react-testing-library