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

Question

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

reactjsunit-testingreact-hooksreact-testing-library

7

好的，我有一个输入框需要至少10个字符，这会启用一个按钮，上面写着“保存并下一步”。

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

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" />

我不确定我在这里错过了什么。

- Karan Kumar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ajeet Shah · Accepted Answer

如果你调试，你会看到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();