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

Question

好的，我有一个需要at-least10 个字符的输入字段，它启用了显示 的按钮Save & Next。

\n

如果description.length < 10，则它保持禁用状态。这在用户界面中运行良好。\n但我无法为其编写测试。

\n

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

\n

错误：

\n

expect(element).toBeDisabled()\n\n    \xe2\x9d\x8c Received element is not disabled:\n      <span class="MuiButton-label" />\n

\n

我想知道我在这里缺少什么

\n

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