酶測試同一組件內的多種渲染方法

Question

我有一個帶有多個渲染方法的組件。 我該如何測試它們？ 用酶和開玩笑來反應。

一些偽代碼作為我的組件結構的示例，因為該組件很小。

 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() 。 似乎酶看了默認的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安裝組件時調用的方法。 其他渲染方法如何為您工作？

也許您可以做這樣的事情，根據某個屬性或狀態決定從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();
  });    
};