时间戳

首页 > 解决方案 > 如何对屏蔽输入进行单元测试？

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

问题描述

如何使用 react-testing-library 对屏蔽的输入字段进行单元测试。该组件是使用材料 ui 和 react-hook-form 开发的。在这里，您可以找到代码并在我身边处理示例。提前致谢

测试文件：

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

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

零件：

                      <InputMask mask="(999) 999-9999">
                          {() => (
                            <TextField
                              id="standard-required"
                              name="phone"
                              label="phone"
                              placeholder="Enter Phone"
                              inputProps={{
                                "data-testid": "phone-input"
                              }}

                            />
                          )}
                        </InputMask>

错误：

    The given element does not have a value setter

    expect(received).toBe(expected) // Object.is equality

    Expected: "(950) 090-2621"
    Received: "(___) ___-____"

标签： reactjsjestjsmaterial-uireact-testing-libraryreact-hook-form

解决方案

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

这就是我的测试的样子：

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),
      }}
    />

我的部门是： Input 是一个 material-ui 组件，TextMaskCustom是react-text-mask. 在这里工作正常。

推荐阅读