Question

我想测试一下我的react-app。

在执行以下操作时，我已删除按钮的“已禁用”属性。

const component = TestUtils.renderIntoDocument(<Mycomponent/>);
const myDOM =findDOMNode(component);
const input = myDOM.querySelector('input');
input.value = "2017-11-11";
let submitButton = myDOM.querySelector('button');
TestUtils.Simulate.click(submitButton);
...
const newlyAddedDate = record.querySelector('#date').innerHTML;
console.log("newlyAddedDate:"+newlyAddedDate);

但是控制台中的输出是

"newlyAddedDate:"

此react-app在Chrome中正常运行。

我认为这是问题

"input.value="2017-11-11";

这句话无法更改输入框中的值。

那么在做反应测试时如何设置输入框中的值呢？

这是这个应用程序的回购 https://github.com/zzbslayer/ChargeAccount-React

Answer 1

嗯，这完全取决于您用于测试的库。这是一个使用摩卡和酶组合的样本。

 beforeEach(() => {
      _spies = {}
      _props = {
        propOne: 'somepropvalue',
        ...
      }
      _wrapper = mount(<Your Component {..._props} />)
    })



    it('Should change the input box', () => {
      let promptInput = _wrapper.find('textarea')

      promptInput.simulate('change', { target: { value : 'sample2' } })
    })

在before方法中，通过传递所有道具来初始化组件。然后在测试中，使用该元素的选择器或HTML id在包装器中找到该文本框。然后使用新值模拟更改事件。

请注意，Jest现已成为大多数反应启动器样板中现在测试的事实框架。在这种情况下，概念保持不变，但语法不同。

如何更改反应测试中的输入值

1 个答案: