如何在reactjs单元测试中声明正确的值？

Question

我已经用onClick事件编写了reactjs组件。这将改变在组件文本，这是组件：

import React, {Component} from 'react' 

export default class SimpleComponent extends Component{ 

constructor(props){ 
     super(props); 
     this.state ={tekst:'leeg'} 
} 

handleClick =() =>{ 
     console.log('handleclick!!!'); 
     this.setState({tekst:'hallo'}); 
} 

render() { 
     return (
     <div> 
      {this.state.tekst} 
      simple comp 
      <button onClick={this.handleClick} /> 

     </div> 
     ) 
     } 
} 

我写了一个单元测试来测试onClick事件：

import React from 'react'; 
import TestUtils from 'react-dom/test-utils'; 
import SimpleComponent from './SimpleComponent' 
import expect from 'expect' 

var renderer = TestUtils.createRenderer(); 

renderer.render(<SimpleComponent />); 

var subject = renderer.getRenderOutput(); 

console.log(subject); 

describe('Simple component',() => { 
    it('should ...',() => { 
     let btn = subject.props.children[2]; 
     btn.props.onClick(); 
     console.log('btn',btn) 
     //let t = subject.props.children[0] 
     //console.log('t',t) 
     let tekst = subject.props.children[0]; 
     //console.log('tekst',tekst); 
     expect(tekst).toEqual('hello'); // => true 
    }) 
}) 

测试打handleClick事件，但tekst仍旧的，应该是'hallo'。我怎样才能测试这个场景，其中state.tekst被handleClick改变了？

Answer 1

帮你一个忙，用enzyme进行单元测试。它使生活变得更容易。然后你可以写这样的东西：

describe('<Foo />',() => { 
    it('changes state on btn click',() => { 
    const wrapper = shallow(<Foo />); 
    wrapper.find('button').simulate('click'); 
    expect(wrapper.state().tekst).toBe('hallo'); 
    }); 
});