酶-如何访问和设置值?

单元测试

斯丁Jim

2020-03-14

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

第1597篇《酶-如何访问和设置值?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
JinJin西门 2020.03.14

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

Tony阳光 2020.03.14

这为我工作:

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android