Testing react typescript connected class component showing error

I have tested connect component before using React without typescript and it worked fine. But in my current project I am using typescript but having difficulty running basic jest test to check if element is rendered. I have a simple unit test to check if the table is rendered without an error which is failing.Please see the code for the component and the test. I get an error for the unit test failing with the following and console.log for wrapper returns the following.

  expect(received).toEqual(expected) // deep equality

    Expected: 1
    Received: 0

 console.log src/Tests/App.test.tsx:43
    <Connect(ProductBase) />

Product.tsx

import React from 'react';
import { Row, Col, Button, Table, Modal, Input } from 'antd';

//Redux
import { connect } from 'react-redux';
import { IRootStoreState } from '../Redux/store';
import { ICollectionStoreState } from '../Redux/state';
import { Dispatch, bindActionCreators } from 'redux';

import { IProduct } from '../Models/product';
import { productActions } from '../Redux/product';

interface IProductStoreProps {
  products: ICollectionStoreState<IProduct>;
}

interface IProductActionProps {
  getProducts: typeof productActions.getProducts;
}

type IProductProps = IProductStoreProps & IProductActionProps;

interface IProductState {
  showModal: boolean;
  product: IProduct[];
  productName: string;
}

class ProductBase extends React.Component<IProductProps, IProductState> {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
      product: [],
      productName: '',
    };

    this.onNewProduct = this.onNewProduct.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  componentDidMount() {
    this.props.getProducts();
  }

  onNewProduct() {
    this.setState({ showModal: true });
  }
  closeModal() {
    this.setState({ showModal: false });
  }
  onCreateNewProduct(values) {
    console.log('New product created');
    console.log(values);
  }
  onChange(e) {
    this.setState({ productName: e.target.value });
  }
  render() {
    const { products } = this.props;

    const columns = [
      {
        title: 'Product Name',
        dataIndex: 'Product',
        key: 'Product',
      },
      {
        title: 'Product Code',
        dataIndex: 'ProductCode',
        key: 'ProductCode',
      },
      {
        title: 'Product Location',
        dataIndex: 'ProductLocation',
        key: 'ProductLocation',
      },
      {
        title: 'Product Price',
        dataIndex: 'ProductCost',
        key: 'ProductCost',
      },
      {
        title: 'Product Owner',
        dataIndex: 'ProductOwner',
        key: 'ProductOwner',
      },
      {
        title: 'Owner Email',
        dataIndex: 'OwnerEmail',
        key: 'OwnerEmail',
      },
    ];

    return (
      <div className='App'>
        <Row style=>
          <Col span={24}>
            <Button
              className='newProduct'
              type='primary'
              name='newProduct'
              id='newProduct'
              onClick={this.onNewProduct}
            >
              New Product
            </Button>
          </Col>
        </Row>

        <Row>
          <Col span={24}>
            <Table
              className='productTable'
              dataSource={products.products}
              columns={columns}
            />
            ;
          </Col>
        </Row>

        <Row>
          <Col span={12}>
            <Modal
              className='newProductModal'
              visible={this.state.showModal}
              title='Title'
              onOk={this.onCreateNewProduct}
              onCancel={this.closeModal}
            >
              <form className='productForm'>
                <Input
                  type='text'
                  placeholder='Product Name'
                  name='ProductName'
                  value={this.state.productName}
                />
              </form>
              <Button
                key='back'
                className='cancelButton'
                id='cancelButton'
                name='cancelButton'
                onClick={this.closeModal}
              >
                Cancel
              </Button>
              <Button
                key='submit'
                type='primary'
                className='createNewProduct'
                id='createNewProduct'
                name='createNewProduct'
                onClick={this.onCreateNewProduct}
              >
                Submit
              </Button>
            </Modal>
          </Col>
        </Row>
      </div>
    );
  }
}

const mapsStateToProps = (state: IRootStoreState) => {
  return {
    products: state.products,
  };
};

const mapActionsToProps = (dispatch: Dispatch): IProductActionProps => {
  return bindActionCreators(
    {
      getProducts: productActions.getProducts,
    },
    dispatch
  );
};

export const Product = connect(
  mapsStateToProps,
  mapActionsToProps
)(ProductBase);

App.test.tsx

import * as React from 'react';
import Enzyme, { shallow } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import { IRootStoreState } from '../Redux/store';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

import { Product } from '../components/Product';

Enzyme.configure({ adapter: new EnzymeAdapter() });


const store = mockStore({});

test('renders the table without error', () => {
  const wrapper1 = shallow(
    <Provider store={store}>
      <Product />
    </Provider>
  ).dive();


  console.log(wrapper1.debug());
  const emailInput = wrapper1.find('.productTable');
  expect(emailInput.length).toEqual(1);
});