Question

让我们说我有这样一个HOC：

const myHoc = ComposedComponent => class Hoccomp extends Component {
  componentWillMount() {
    this.foo = 'bar';
  }

  render() {
    return (
      <ComposedComponent {...this.props}/>
    );
  }
};

如何运行测试以确定this.foo === 'bar'？我目前正在使用react-addons-test-utils，但我可以使用任何解决方案，只要我可以在节点环境中运行它。

Answer 1

组件是函数和类。您可以简单地实例化一个并调用该方法，然后检查实例。

但是，如果浅渲染，则可以调用getMountedInstance()来访问创建的组件并以此方式进行测试。例如：

var shallowRenderer = ReactTestUtils.createRenderer();
shallowRenderer.render( <myHoc /> );
expect( shallowRenderer.getMountedInstance().foo ).toEqual( 'bar' );

但是，请确保两件事：（1）您不只是测试内部实现细节，也就是说您正在测试公开的内容; （2）你真的确定在this上设置一个变量就是你想要的，而不是传递道具，这样你的组合组件就可以是纯粹的和无状态的。作为后者的一个例子：

const Bare = ({ bar }) => (
  <h1>
    foo = {bar}
  </h1>
);

const Hoc = Component => class Hoc extends Component {
  componentWillMount () {
    this.foo = 'bar';
  }

  render () {
    return ( <Component {...this.props} foo={this.foo} /> );
  }
}

// use the hoc
const Wrapped = Hoc( Bare );
ReactDOM.render( <Wrapped />, document.getElementById( 'app' ) );

这对于两个组件来说都更清洁，更容易测试。并且测试this.foo没有多大意义，因为我们想要测试foo作为道具传递 - 内部实现与良好的单元测试无关。

所有这一切，有些情况下你想要测试指定的属性。在这种情况下，请确保它是您想要的。

测试React HOC的属性

1 个答案: