title: Material UI + Enzyme testing component
body: <p>I have component in React which I'm trying to test with Jest, unfortunately test do not pass.</p>
  
  <p>The component code:</p>
  
  <pre><code>import React, {Component} from 'react';
  import ProductItem from '../ProductItem/ProductItem';
  import AppBar from "@material-ui/core/es/AppBar/AppBar";
  import Tabs from "@material-ui/core/es/Tabs/Tabs";
  import Tab from "@material-ui/core/es/Tab/Tab";
  import {connect} from 'react-redux';
  
  
  class ProductsTabsWidget extends Component {
  
      state = {
          value: 0
      }
  
      renderTabs = () =&gt; {
          return this.props.tabs.map((item, index) =&gt; {
              return item.products.length &gt; 0 ? (&lt;Tab key={index} label={item.title}/&gt;) : false;
          })
      }
  
      handleChange = (event, value) =&gt; {
          this.setState({value});
      };
  
  
      renderConentActiveTab = () =&gt; {
          if (this.props.tabs[this.state.value]) {
              return this.props.tabs[this.state.value].products.map((productIndex) =&gt; {
                  return (&lt;ProductItem key={productIndex} {...this.props.products[productIndex]} /&gt;);
              });
          }
      }
  
      render() {
          let tabs = null;
          let content = null;
          if (this.props.tabs) {
              tabs = this.renderTabs();
              content = this.renderConentActiveTab();
          }
          return (
              &lt;div&gt;
                  &lt;AppBar position="static" color="default"&gt;
                      &lt;Tabs
                          value={this.state.value}
                          onChange={this.handleChange}
                          indicatorColor="primary"
                          textColor="primary"
                          centered
                          scrollButtons="auto"
                      &gt;
                          {tabs}
                      &lt;/Tabs&gt;
                  &lt;/AppBar&gt;
                  &lt;div className="productWidget"&gt;
                      &lt;div className="wrapper"&gt;
                          {content}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  const mapStateToProps = state =&gt; {
      return {
          products: state.product.products,
      }
  }
  
  export default connect(mapStateToProps)(ProductsTabsWidget);
  </code></pre>
  
  <p>I have tried to write proper test for this component, the code is below:</p>
  
  <pre><code>import React from 'react';
  
  import {configure, shallow} from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  import ProductsTabsWidget from "./ProductsTabsWidget";
  
  
  configure({adapter: new Adapter()});
  
  describe('ProductsTabsWidget - component', () =&gt; {
      let wrapper;
  
  
      beforeEach(() =&gt; {
          wrapper = shallow(&lt;ProductsTabsWidget/&gt;);
      });
  
      it('renders with minimum props without exploding', () =&gt; {
          wrapper.setProps({
              tabs: [],
              products:[]
          });
          expect(wrapper).toHaveLength(1);
      });
  })
  </code></pre>
  
  <p>But when I'm running test I am getting error:</p>
  
  <pre><code>Test suite failed to run
  
      F:\PRACA\reactiveShop\node_modules\@material-ui\core\es\AppBar\AppBar.js:1
      ({"Object.&lt;anonymous&gt;":function(module,exports,require,__dirname,__filename,global,jest){import _extends from "@babel/runtime/helpers/builtin/extends";
                                                                                               ^^^^^^
  
      SyntaxError: Unexpected token import
  
        at new Script (vm.js:51:7)
        at Object.&lt;anonymous&gt; (src/components/product/ProductsTabsWidget/ProductsTabsWidget.js:3:15)
  </code></pre>
  
  <p>I have tried testing with <code>shallow</code>, <code>mount</code>, <code>render</code> but it did not help. What am I missing?</p>
  
  <p>My application is created on <code>create-react-app</code>.</p>