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

Question

好的，所以我有这个输入字段，它需要at-least10个字符，它启用了显示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();