如何在reactjs单元测试中声明正确的值?
我已经用onClick事件编写了reactjs组件。这将改变在组件文本,这是组件:如何在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改变了?
帮你一个忙,用enzyme进行单元测试。它使生活变得更容易。然后你可以写这样的东西:
describe('<Foo />',() => {
it('changes state on btn click',() => {
const wrapper = shallow(<Foo />);
wrapper.find('button').simulate('click');
expect(wrapper.state().tekst).toBe('hallo');
});
});
jtest和anf酶 –
jtest有没有优点/缺点?我认为这是为了Java。 – mradziwon
https://facebook.github.io/jest/我的坏不是jtest –
你在用什么酶? –