unit-testing - react 测试；如何模拟 componentDidMount 或覆盖它？

Question

我正在尝试测试一个 React 组件。

var Component = React.createClass({

  componentDidMount: function () {

    return this.setState({
      name: 'blabla'
    });
  },

  render: function () {

    return (
      <h1>{this.state.name}</h1>
    );
  }
});

有没有办法在测试期间模拟 componentDidMount 返回或执行的操作？那会让我自己测试它，只测试组件渲染行为。

谢谢!

Answer 1

我更喜欢下面的方法，但需要使用 ES6 类。

// component.jsx
class Component extends React.Component {
    componentDidMount() { return this.setState({name: 'blabla'}); }
    render() { return (<h1>{this.state.name}</h1>); }
}

//component-spec.jsx
describe('Component', () => {
    it('does stuff', () => {
        let ComponentTest = class extends Component {
            componentDidMount() { 
                // your override here
            }
        };
        let component = TestUtils.renderIntoDocument(<ComponentTest />);
        //expect(component...).toEqual(...)
    });
});

重点是创建一个继承OriginalClass的按需ChildClass，做任何覆盖然后TestUtils.renderIntoDocument(<ChildClass />)