Reactjs 如何对屏蔽输入进行单元测试？

如何使用react测试库对屏蔽输入字段进行单元测试。该组件是使用MaterialUI和react-hook表单开发的。在这里，您可以找到我这边的代码和示例。提前谢谢

测试文件：

 let Phone_Input = getByTestId("phone-input");

  fireEvent.change(
      <InputMask mask="(999) 999-9999">{() => Phone_Input}</InputMask>,
      {
        target: { value: "9500902621" }
      }
    );

---

我的组件与您的组件不同，但可能会引导您走向正确的方向

我的测试是这样的：

const propsMock = { mask: sampleMask };
const { getByTestId } = render(<MaskedTextField {...propsMock} />);

const input = getByTestId('maskedtextfield-');
fireEvent.change(input, { target: { value: '9999999999' } });
expect(getByTestId('maskedtextfield-').value).toEqual('(999) 999-9999');

constpropsmock={mask:sampleMask}；
const{getByTestId}=render（）；
常量输入=getByTestId（'maskedtextfield-'）；
change（输入，{target:{value:'99999999'}}）；
expect（getByTestId（'maskedtextfield-'）.value）.toEqual（'（999）999-9999'）；

重要组成部分：

<Input
      placeholder={placeholder}
      disabled={disabled}
      onChange={onChange}
      onKeyUp={onKeyUp}
      onBlur={onBlur}
      inputRef={inputRef}
      inputComponent={TextMaskCustom as any}
      inputProps={{
        'data-testid': dataTestId || `maskedtextfield-${label}`,
        defaultValue: defaultValue || '',
        ...getMaskProps(mask),
      }}
    />

---

我的dep是：Input是一个materialui组件，

TextMaskCustom

是

react text mask

的一个实现。在这里工作很好。

你找到解决办法了吗？面对同样的问题，为什么要两次请求

getByTestId（'maskedtextfield-'）.value

？它不是已经加载到

输入中了吗？

？可能只是我所做测试的一个遗留问题。理论上，您可以使用

输入

，它应该可以正常工作

const propsMock = { mask: sampleMask };
const { getByTestId } = render(<MaskedTextField {...propsMock} />);

const input = getByTestId('maskedtextfield-');
fireEvent.change(input, { target: { value: '9999999999' } });
expect(getByTestId('maskedtextfield-').value).toEqual('(999) 999-9999');

<Input
      placeholder={placeholder}
      disabled={disabled}
      onChange={onChange}
      onKeyUp={onKeyUp}
      onBlur={onBlur}
      inputRef={inputRef}
      inputComponent={TextMaskCustom as any}
      inputProps={{
        'data-testid': dataTestId || `maskedtextfield-${label}`,
        defaultValue: defaultValue || '',
        ...getMaskProps(mask),
      }}
    />