为了账号安全,请及时绑定邮箱和手机立即绑定

请问该如何进行React组件单元测试?

/ 猿问

请问该如何进行React组件单元测试?

交互式爱情 2019-08-20 18:14:54

如何进行React组件单元测试


查看完整描述

4 回答

?
胡子哥哥

// 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}

);
}

}

// 测试代码
// 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(
Facebook
);
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();
});

查看完整回答
反对 回复 2019-08-24
?
三国纷争

1.父组件->前几层子组件:props2.父组件->非常深入的子组件(比如从最顶层到第5层以后):context这种情况几乎很少见,除非写框架或者工具,最好是只用props,清晰明了3.子组件->父组件:callback4.子组件时间:严格意义上不存在

查看完整回答
反对 回复 2019-08-24
?
牧羊人nacy

可以在子组件添加一个componentWillRecieveProps周期,在里面获取到即将接收的props。如下: componentWillReceiveProps(nextProps) { this.setState({ A: nextProps.A }); }

查看完整回答
反对 回复 2019-08-24
?
慕婉清6462132

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();

});


查看完整回答
反对 回复 2019-08-24

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信