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

});