小编rin*_*o28的帖子

我正在尝试编写一个测试用例来断言在选择单选选项时禁用数字输入，并且在使用 React 测试库 utils 查询<input>由 Material UI 呈现的HTML 时遇到问题<TextField>。

此测试适用的组件中有两个<TextField>实例，因此我尝试使用查询findAllByLabelText，然后循环访问这些节点以确认禁用状态。

反应组件

function OverridePriceModal () {
  ...
  return (
    <>
      ...
      <TextField
        type="number"
        label="Custom Pricing"
        value={regularPriceOverride}
        onChange={evt => setRegularPriceOverride(evt.target.value)}
        disabled={!isRegularPriceOverridden}
      />
      ...
      <TextField
        type="number"
        label="Custom Pricing"
        value={specialPriceOverride}
        onChange={evt => setSpecialPriceOverride(evt.target.value)}
        disabled={!isSpecialPriceOverridden}
      />
      ...
    </>
  );
}

单元测试

test('custom price inputs are disabled while following system pricing', async () => {
  render(<OverridePriceModal />);

  const priceInputs = await screen.findAllByLabelText('Custom Pricing');
  _.forEach(priceInputs, input => {
    expect(input).toBeDisabled(); …