Question

如何使用 Jest 测试 React 组件

Answer 1

// 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="http://www.facebook.com">Facebook</Link>
);
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();
});