javascript - enzyme 测试同一组件内的多种渲染方法

Question

我有一个具有多种渲染方法的组件。我怎样才能测试它们呢？ 使用 enzyme 和 Jest 进行 react 。

一些伪代码作为我的组件结构的示例，因为该组件非常大。

class MyComponent extends Component{

  render1(){
    return(
      <div>render1</div>
    )
  }
  
  render2(){
    return(
      <div>render2</div>
    )
  }
  
  render(){
    return(
      <div>default</div>
    )
  }
}

export default MyComponent;

我的测试仅涵盖render()，它不涵盖render1()或render2()。 看起来 enzyme 会查看默认的 render() 方法？

describe('MyComponent', () => {
    beforeEach(() => {
      wrapper = shallow(<MyComponent />);
    });
  
  it('MyComponent renders without crashing', () => {
      expect(wrapper.length).toBeTruthy();
  });
};

如何在我的报道中包含 render1() 和 render2()？

Answer 1

您应该只有一个 render() 方法，即使用 ReactDOM.render 或 enzyme.shallow 挂载组件时调用的方法。其他渲染方法对您来说效果如何？

也许你可以这样做，根据某些 prop 或状态决定从 render() 方法调用哪个方法:

class MyComponent extends Component{

  render1(){
    return(
      <div>render1</div>
    )
  }

  render2(){
    return(
      <div>render2</div>
    )
  }

  render(){
    const {shouldRender1, shouldRender2} = this.props;

    if (shouldRender1) {
      return this.render1();
    }

    if (shouldRender2) {
      return this.render2();
    }    

    return(
      <div>default</div>
    )
  }
}

export default MyComponent;

然后你的测试可以如下所示:

describe('MyComponent', () => {
  it('MyComponent should render with render1 method', () => {
      wrapper = shallow(<MyComponent shouldRender1={true} />);
      expect(wrapper.length).toBeTruthy();
  });

  it('MyComponent should render with render2 method', () => {
      wrapper = shallow(<MyComponent shouldRender2={true} />);
      expect(wrapper.length).toBeTruthy();
  });  

  it('MyComponent should render with default render method', () => {
      wrapper = shallow(<MyComponent />);
      expect(wrapper.length).toBeTruthy();
  });    
};