如何使用 Jest 测试 React 组件

Question

如何使用 Jest 测试 React 组件

Answer 1

12345678910111213141516171819202122232425262728293031323334353637383940414243//&nbsp;React源码//&nbsp;Link.react.jsimport&nbsp;React&nbsp;from&nbsp;'react';&nbsp;const&nbsp;STATUS&nbsp;=&nbsp;{&nbsp;&nbsp;NORMAL:&nbsp;'normal',&nbsp;&nbsp;HOVERED:&nbsp;'hovered',};&nbsp;export&nbsp;default&nbsp;class&nbsp;Link&nbsp;extends&nbsp;React.Component&nbsp;{&nbsp;&nbsp;&nbsp;constructor()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;super();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this._onMouseEnter&nbsp;=&nbsp;this._onMouseEnter.bind(this);&nbsp;&nbsp;&nbsp;&nbsp;this._onMouseLeave&nbsp;=&nbsp;this._onMouseLeave.bind(this);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.state&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;class:&nbsp;STATUS.NORMAL,&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;_onMouseEnter()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;this.setState({class:&nbsp;STATUS.HOVERED});&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;_onMouseLeave()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;this.setState({class:&nbsp;STATUS.NORMAL});&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;render()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;className={this.state.class}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;href={this.props.page&nbsp;||&nbsp;'#'}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onMouseEnter={this._onMouseEnter}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onMouseLeave={this._onMouseLeave}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{this.props.children}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;);&nbsp;&nbsp;}&nbsp;}&nbsp;12345678910111213141516171819202122232425//&nbsp;测试代码//&nbsp;Link.react-test.jsimport&nbsp;React&nbsp;from&nbsp;'react';import&nbsp;Link&nbsp;from&nbsp;'../Link.react';import&nbsp;renderer&nbsp;from&nbsp;'react-test-renderer';&nbsp;test('Link&nbsp;changes&nbsp;the&nbsp;class&nbsp;when&nbsp;hovered',&nbsp;()&nbsp;=>&nbsp;{&nbsp;&nbsp;const&nbsp;component&nbsp;=&nbsp;renderer.create(&nbsp;&nbsp;&nbsp;&nbsp;<Link&nbsp;page="&nbsp;&nbsp;);&nbsp;&nbsp;let&nbsp;tree&nbsp;=&nbsp;component.toJSON();&nbsp;&nbsp;expect(tree).toMatchSnapshot();&nbsp;&nbsp;&nbsp;//&nbsp;manually&nbsp;trigger&nbsp;the&nbsp;callback&nbsp;&nbsp;tree.props.onMouseEnter();&nbsp;&nbsp;//&nbsp;re-rendering&nbsp;&nbsp;tree&nbsp;=&nbsp;component.toJSON();&nbsp;&nbsp;expect(tree).toMatchSnapshot();&nbsp;&nbsp;&nbsp;//&nbsp;manually&nbsp;trigger&nbsp;the&nbsp;callback&nbsp;&nbsp;tree.props.onMouseLeave();&nbsp;&nbsp;//&nbsp;re-rendering&nbsp;&nbsp;tree&nbsp;=&nbsp;component.toJSON();&nbsp;&nbsp;expect(tree).toMatchSnapshot();});&nbsp;