时间戳

首页 > 解决方案 > react测试库中按标签查询material-ui输入

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

问题描述

我正在尝试编写一个测试用例，以断言在选择单选选项时禁用数字输入，并且在使用 React 测试库实用程序查询<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”属性。

标签： reactjsunit-testingjestjsmaterial-uireact-testing-library

解决方案

好吧，显然我所要做的就是将堆栈溢出用作橡皮鸭，因为我立即弄清楚了......

解决方案

只需将id道具添加到<TextField>.

除非您提供道具，否则MUI中的labeland不会与属性正确链接，如MUI TextField docs的Accessibility部分所述。inputTextFieldforid

也许单元测试毕竟会迫使我采取最佳实践..

推荐阅读