如何使用 Jest 测试 React 组件

Question

如何使用 Jest 测试 React 组件

Answer 1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

// React源码 // Link.react.js import React from 'react';   const STATUS = {   NORMAL: 'normal',   HOVERED: 'hovered', };   export default class Link extends React.Component {     constructor() {     super();       this._onMouseEnter = this._onMouseEnter.bind(this);     this._onMouseLeave = this._onMouseLeave.bind(this);       this.state = {       class: STATUS.NORMAL,     };   }     _onMouseEnter() {     this.setState({class: STATUS.HOVERED});   }     _onMouseLeave() {     this.setState({class: STATUS.NORMAL});   }     render() {     return (       <a         className={this.state.class}         href={this.props.page || '#'}         onMouseEnter={this._onMouseEnter}         onMouseLeave={this._onMouseLeave}>         {this.props.children}       </a>     );   }   }

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

// 测试代码 // Link.react-test.js import React from 'react'; import Link from '../Link.react'; import renderer from 'react-test-renderer';   test('Link changes the class when hovered', () => {   const component = renderer.create(     <Link page="   );   let tree = component.toJSON();   expect(tree).toMatchSnapshot();     // manually trigger the callback   tree.props.onMouseEnter();   // re-rendering   tree = component.toJSON();   expect(tree).toMatchSnapshot();     // manually trigger the callback   tree.props.onMouseLeave();   // re-rendering   tree = component.toJSON();   expect(tree).toMatchSnapshot(); });