title: How to use translation with component to make it useful for unit testing
body: <p>Most of the components looks like as follows:</p>
  
  <pre><code>import React, { Component } from "react";
  import { withTranslation } from "react-i18next";
  
  class XYZ extends Component {
      constructor(props) {
      super(props);
      this.state = {
      };
    }
  
    .....
    .....
  
  
    render() {
      const { t } = this.props;
  
      return (
  
          ..... 
      );
    }
  }
  
  export default withTranslation()(XYZ);
  </code></pre>
  
  <p>or, like below, in case of function components:</p>
  
  <pre><code>export const XYZ = withTranslation()(({ t, ...props }) =&gt; {
    ....
    return (
      .....
    );
  });
  </code></pre>
  
  <p>I wanted to use enzyme shallow as it would only unit test the XYZ component than its child components but with it I face a problem as the first level of component is translation and it doesn't go to Child components inside XYZ. So, I am thinking I may not be writing the components properly. What do you suggest is the right way to write this class and function component so that testing would be easy. </p>