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

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:" 

该反应应用内铬正确执行。 我相信它的

"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' } }) 
    }) 

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

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