如何在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'); 
    }); 
});