React 测试库 - 检查按钮禁用属性

Question

好的，所以我有这个输入字段，它需要 at-least 10 个字符，它启用显示 Save & Next.

的按钮

如果description.length < 10，它将保持禁用状态。这在 UI 中运行良好。但是我无法为其编写测试。

test(' Disables the save and next button if description < 10', () => {
    render(<StepOne />, { initialState });
    const input = screen.getByLabelText(/description/i);
    fireEvent.change(input, { target: { value: '123456' } }); //  Length < 10
    const button = screen.getByText('Save & Next');
    console.log(button.innerHTML);
    expect(button).toBeDisabled(true);
  });

错误：

expect(element).toBeDisabled()

    ❌ Received element is not disabled:
      <span class="MuiButton-label" />

我想知道我在这里遗漏了什么

Answer 1

如果您 debug，您将看到 MUI 是如何呈现禁用按钮的：

<button
  class="MuiButtonBase-root MuiButton-root MuiButton-text Mui-disabled Mui-disabled"
  disabled=""
  tabindex="-1"
  type="button"
>
  <span class="MuiButton-label">Save & Next</span>
</button>

因此，您可以使用 .closest 访问 button:

const button = screen.getByText('Save & Next').closest("button");
expect(button).toBeDisabled();

React 测试库 - 检查按钮禁用属性

React testing library - Check button disabled attribute

unit-testing

reactjs

react-testing-library

react-hooks