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

酶测试同一组件内的多种渲染方法

1 个答案: