檢查按鈕是否在 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")的問題是getByText("Click me")選擇器返回<span> DOM 節點，但對於測試，我需要檢查<button>節點的disable屬性。 處理此類測試用例的最佳實踐是什么？ 我看到了幾個解決方案，但所有這些聽起來都有點不對勁：

1. 對<button>元素使用data-test-id
2. 選擇<Click />組件的祖先之一，然后選擇within(...)此范圍within(...)的按鈕
3. 單擊帶有fireEvent的選定元素並檢查是否沒有發生任何事情

你能提出更好的方法嗎？

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

對於尋找測試的人來說，按鈕沒有被禁用。

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

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

Answer 4

您可以使用@testing-library/react按鈕的禁用屬性，如下所示。

例子：

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

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

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

Answer 5

我會禮貌地爭辯說您正在測試一個實現細節，而 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 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'))

希望這會有所幫助。