unit-testing - 酶 - 如何访问和设置价值？

Question

我对<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在控制台中输入，它会显示预期值。

score 116 · Accepted Answer

我想你想要的是：

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

这是我的来源。

您不需要在render()任何地方使用来设置值。仅供参考，您使用的是两个不同render()的 's。您的第一个代码块中的一个来自 Enzyme，是包装器对象上的一个方法mount并find给您。第二个虽然不是 100% 清楚，但可能是来自react-dom. 如果您使用的是 Enzyme，只需根据需要使用shallowor即可mount，不需要renderfrom react-dom。

score 52 · Accepted Answer

使用Enzyme 3，如果您需要更改输入值但不需要触发onChange函数，您可以这样做（node属性已被删除）：

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

如果你有一个道具（即受控组件），你可以使用wrapper.find('input').simulate("change", { target: { value: "foo" }})调用。onChange

score 46 · Accepted Answer

知道了。（更新/改进版本）

  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();
  });

score 18 · Accepted Answer

所以这里有很多不同的意见。唯一对我有用的是以上都不是，它正在使用input.props().value. 我希望这会有所帮助。

score 5 · Accepted Answer

我正在使用对 TypeScript 的反应，以下内容对我有用

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

直接设置值

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

导致我出现编译警告。

score 4 · Accepted Answer

我正在使用默认情况下带有 jest 和酶 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();

score 3 · Accepted Answer

以上都不适合我。这就是我在 Enzyme ^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);

score 2 · Accepted Answer

这对我使用酶 2.4.1 有效：

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

console.log(input.node.value);

score 2 · Accepted Answer

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

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

看来你需要先定义change事件中发生的事情，然后再模拟它（而不是用数据模拟change事件）

score 2 · Accepted Answer

上面的解决方案都不适合我，因为我使用的是 Formik，我需要将字段标记为“已触及”并更改字段值。以下代码对我有用。

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

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

score 1 · Accepted Answer

就我而言，我使用的是 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 。然后断言。

score 1 · Accepted Answer

这是我的代码..

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 位的提交按钮验证（禁用/启用）。

score 0 · Accepted Answer

这对我有用：

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

score 0 · Accepted Answer

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

从 props 设置值：

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

html代码：

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

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

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

干杯

score -1 · Accepted Answer

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

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

score -1 · Accepted Answer

.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

希望这对其他人有帮助！

unit-testing - 酶 - 如何访问和设置价值？

16 回答 16

Related

Reference