酶-如何访问和设置<input>值？

我对使用<input>时如何获取价值感到困惑mount。这是我的测试内容：

  it('cancels changes when user presses esc', done => {
    const wrapper = mount(<EditableText defaultValue="Hello" />);
    const input = wrapper.find('input');

    console.log(input.render().attr('value'));
    input.simulate('focus');
    done();
  });

控制台将输出undefined。但是，如果我稍微修改一下代码，它就会起作用：

  it('cancels changes when user presses esc', done => {
    const wrapper = render(<EditableText defaultValue="Hello" />);
    const input = wrapper.find('input');

    console.log(input.val());
    input.simulate('focus');
    done();
  });

当然，除了那input.simulate行因为我现在正在使用而失败render。我都需要正常工作。我该如何解决？

编辑：

我应该提到，<EditableText />不是受控组件。但是，当我通过defaultValue到<input />，似乎要设置的值。上面的第二个代码块确实打印出了该值，同样，如果我在Chrome中检查了输入元素并$0.value在控制台中键入，它将显示期望的值。

我认为您想要的是：

input.simulate('change', { target: { value: 'Hello' } })

这是我的消息来源。

您无需在render()任何地方使用它来设置值。仅供参考，您使用的是两种不同render()的。第一个代码块中的一个来自Enzyme，它是包装对象上的一种方法mount，find为您提供。尽管不是100％清晰，但第二个可能是中的一个react-dom。如果您使用的是酶，只需使用shallow或mount适当的话，就不需要renderfrom react-dom。

使用酶3，如果您需要更改输入值但不需要触发onChange功能，则可以执行此操作（node属性已删除）：

wrapper.find('input').instance().value = "foo";

如果您有支持的道具（例如，受控组件），则可以使用wrapper.find('input').simulate("change", { target: { value: "foo" }})进行调用onChange。

得到它了。（更新/改进版本）

  it('cancels changes when user presses esc', done => {
    const wrapper = mount(<EditableText defaultValue="Hello" />);
    const input = wrapper.find('input');

    input.simulate('focus');
    input.simulate('change', { target: { value: 'Changed' } });
    input.simulate('keyDown', {
      which: 27,
      target: {
        blur() {
          // Needed since <EditableText /> calls target.blur()
          input.simulate('blur');
        },
      },
    });
    expect(input.get(0).value).to.equal('Hello');

    done();
  });

这里有很多不同的意见。唯一对我有用的是上述所有方法，而没有使用input.props().value。希望对您有所帮助。

我正在使用默认情况下带有笑话和酶2.7.0附带的create-react-app。

这对我有用：

const wrapper = mount(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input')[index]; // where index is the position of the input field of interest
input.node.value = 'Change';
input.simulate('change', input);
done();

以上都不对我有用。这是我对酶^ 3.1.1起作用的原因：

input.instance().props.onChange(({ target: { value: '19:00' } }));

这是上下文的其余代码：

const fakeHandleChangeValues = jest.fn();
  const fakeErrors = {
    errors: [{
      timePeriod: opHoursData[0].timePeriod,
      values: [{
        errorIndex: 2,
        errorTime: '19:00',
      }],
    }],
    state: true,
  };
const wrapper = mount(<AccessibleUI
    handleChangeValues={fakeHandleChangeValues}
    opHoursData={opHoursData}
    translations={translationsForRendering}
  />);
const input = wrapper.find('#input-2').at(0);
input.instance().props.onChange(({ target: { value: '19:00' } }));
expect(wrapper.state().error).toEqual(fakeErrors);

我正在使用TypeScript进行响应，以下内容对我有用

wrapper.find('input').getDOMNode<HTMLInputElement>().value = 'Hello';
wrapper.find('input').simulate('change');

直接设置值

wrapper.find('input').instance().value = 'Hello'` 

在给我一个编译警告。

这对我来说使用酶2.4.1起作用：

const wrapper = mount(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input');

console.log(input.node.value);

这是我的代码。

const input = MobileNumberComponent.find('input')
// when
input.props().onChange({target: {
   id: 'mobile-no',
   value: '1234567900'
}});
MobileNumberComponent.update()
const Footer = (loginComponent.find('Footer'))
expect(Footer.find('Buttons').props().disabled).equals(false)

我已使用更新了DOM，componentname.update() 然后检查了长度为10位的提交按钮验证（禁用/启用）。

就我而言，我正在使用ref回调，

  <input id="usuario" className="form-control" placeholder="Usuario"
                                                       name="usuario" type="usuario"
                                                       onKeyUp={this._validateMail.bind(this)}
                                                       onChange={()=> this._validateMail()}
                                                       ref={(val) =>{ this._username = val}}
                                                    >

获得价值。因此，酶不会更改this._username的值。

所以我不得不：

login.node._username.value = "mario@com.com";
    user.simulate('change');
    expect(login.state('mailValid')).toBe(true);

为了能够设置该值，然后调用change。然后断言。

这对我有用：

let wrapped = mount(<Component />);
expect(wrapped.find("input").get(0).props.value).toEqual("something");

万一有人在挣扎，我发现以下对我有用

const wrapper = mount(<NewTask {...props} />); // component under test
const textField = wrapper.find(TextField);

textField.props().onChange({ target: { value: 'New Task 2' } })
textField.simulate('change');
// wrapper.update() didn't work for me, need to find element again

console.log(wrapper.find(TextField).props()); // New Task 2

似乎您需要先定义更改事件中发生的事情，然后对其进行仿真（而不是使用数据模拟更改事件）

我以一种非常简单的方式解决了：

1. 从props设置值：

  const wrapper: ShallowWrapper = shallow(<ProfileViewClass name: 'Sample Name' />);

2. HTML代码：

  <input type='text' defaultValue={props.name} className='edituser-name' />

3. 从访问属性wrapper.find(element).props().attribute-name：

  it('should render user name', () => {
    expect(wrapper.find('.edituser-name').props().defaultValue).toContain(props.name);
  });

干杯

上面的解决方案都不适合我，因为我正在使用Formik，并且需要在更改字段值的同时将字段标记为“已触摸”。以下代码为我工作。

const emailField = orderPageWrapper.find('input[name="email"]')

emailField.simulate('focus')
emailField.simulate('change', { target: { value: 'test@example.com', name: 'email' } })
emailField.simulate('blur')

我使用包装器的setValue [ https://vue-test-utils.vuejs.org/api/wrapper/#setvalue-value]方法设置值。

inputA = wrapper.findAll('input').at(0)
inputA.setValue('123456')

.simulate()某种程度上对我不起作用，我node.value无需调用即可访问.simulate()；在您的情况下：

const wrapper = mount(<EditableText defaultValue="Hello" />);
const input = wrapper.find('input').at(0);

// Get the value
console.log(input.node.value); // Hello

// Set the value
input.node.value = 'new value';

// Get the value
console.log(input.node.value); // new value

希望这对其他人有帮助！