Question

我正在尝试模拟更改事件以更改组件中react-number-format组件的valeu。

当我测试组件时，我得到 TypeError：value.replace不是模拟（'change'，event）方法中的函数。

在测试组件内呈现NumberFormat组件：

<NumberFormat
  id="estimateLineQty"
  name="estimateLineQty"
  className="form-control input-sm"
  value={this.state.estimateLineQty}
  thousandSeparator=" "
  decimalSeparator=","
  decimalScale={2}
  onValueChange={values => {
    const { formattedValue, floatValue } = values;
    const newPrice = floatValue * this.state.estimateLineUnitPrice;
    this.setState({
      estimateLineQty: formattedValue,
      estimateLinePrice: newPrice
    });
  }}
/>

测试：

it.only('updates estimateLinePrice when changing estimateLineQty value', () => {
  const props = estimateLineProps.line;
  const wrapper = mount(<EstimateLine {...props} />);
  const inputQty = wrapper.find('NumberFormat[name="estimateLineQty"]');
  const inputUnitPrice = wrapper.find('NumberFormat[name="estimateLineQty"]');
  const inputPrice = wrapper.find('NumberFormat[name="estimateLinePrice"]');
  const oldQty = inputQty.instance().props.value;
  const newQty = oldQty + 2;
  const event = {
    target: { value: newQty }
  };
  inputQty.simulate('change', event);
  expect(inputPrice.instance().props.value).not.toEqual(oldQty);
  expect(inputPrice.instance().props.value).toEqual(
    newQty * inputUnitPrice.instance().props.value
  );
});

如何在NumberFormat组件上模拟更改事件并更改其值？

谢谢。

Answer 1

方法 wrapper.find（＆＃39; NumberFormat的[名称=＆＃34; estimateLineQty＆＃34;]＆＃39）

回复你一个List，你需要做这样的事情： inputQty.at（0）获得属性和 inputQty.get（0）模拟。

希望这对你有所帮助。

Answer 2

您只能在原生HTML输入上使用.simulate('change', event);。

在您的情况下，您应该直接调用该方法：

inputQty.instance().onValueChange(yourTestValues);

Answer 3

我终于明白了：

inputQty.instance().props.onValueChange(yourTestValues);

如何在react-number格式上模拟change事件

3 个答案: