unit testing - 酵素

发布于 2020-03-27 11:41:08

我对使用<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在控制台中键入，它将显示期望的值。

提问者

ffxsam

被浏览

查看英文版

查看原文

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

Pre101 2016-10-13 01:25:30

好奇这对您如何运作。我们正在使用PhantomJS，mount()并且没有将组件插入DOM。因此，他们无法获得关注。我们必须添加一个DOM元素，并使用context选项mount()

ffxsam 2016-10-13 01:38:23

@ Pre101我实际上开始使用Jest而不是Enzyme。强烈推荐！

Siddharth_Vyas 2018-02-02 13:12:26

@ffxsam：input.get（0）.value始终显示“未定义”

Ersel Aker 2018-04-10 16:52:54

@Siddharth_Vyas尝试 input.prop('value')

unit testing - 酵素

相关问题