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节点，但是对于测试，我需要检查{{1}的disable属性}节点。处理此类测试用例的最佳实践是什么？我看到了几种解决方案，但是所有这些听起来都有些偏离：

将<button>元素用于data-test-id
选择<button>组件的祖先之一，然后选择按钮<Click />此作用域
使用within(...)单击选定的元素，并检查没有任何反应

您能建议一种更好的方法吗？

Answer 1

对于正在寻找该按钮的用户，未禁用。

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

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

Answer 2

您可以使用toHaveAttribute和closest对其进行测试。

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

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

Answer 3

我会礼貌地争辩说您正在测试一个实现细节，而 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();
  });
})

Answer 4

您可以使用toBeDisabled中的esting-library/jest-dom，它是一个自定义的玩笑匹配器，用于测试DOM的状态：

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

Answer 5

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

示例：

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

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

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

Answer 6

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

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

希望这会有所帮助。

检查按钮在React-Testing-Library中是否被禁用

7 个答案: