温馨提示:本文翻译自stackoverflow.com,查看原文请点击:unit testing - Enzyme
reactjs unit-testing enzyme

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
被浏览
77
ffxsam 2016-06-05 12:11

得到它了。(更新/改进版本)

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