在react测试库中按标签查询material-ui输入

Question

我正在尝试编写一个测试用例来断言在选择单选选项时禁用数字输入，并且在使用 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();
  });
});

预期成绩

我希望通过标签文本找到输入节点，并将其禁用，从而通过测试。

实际结果

我在测试输出中收到以下错误消息：

找到一个带有以下文本的标签：自定义定价，但未找到与该标签关联的表单控件。确保您正确使用“for”属性或“aria-labelledby”属性。

Answer 1

好吧，显然我所要做的就是使用堆栈溢出作为橡皮鸭，因为我立即就明白了..

解决方案

id只需将prop添加到<TextField>.

除非您提供 prop，否则labelMUIinput中的和TextField不会与属性正确链接，如MUI TextField 文档的Accessibility部分所述。forid

也许单元测试最终会迫使我采用最佳实践......