Looping conditions in testing react component

I am new to test case. Want to write testcase for a child tag of a react dumb component i.e. TabStyle which is getting created in a loop. Below is the code snippet. Please help me who has fair knowledge on chai and enzyme. thanks!

testcase for Tabs is working fine, wanted to write similar for TabStyle child tag.

TestComponent.js
================
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { TabStyle } from './Styled';

export default function TestComponent(props) {
     const { value, dataMap , handleChange } = props;
        return (
        <Tabs 
            value={value} 
            textColor="primary"
            indicatorColor="primary"

        >
        {dataMap.map((card, index) => {
            const label = `${card.get('a')} (${card.get('b')})`;
            return <TabStyle key={index} active={value === index} onClick=
             {() => handleChange(index)}>
                <Tab
                    key={index}
                    label={label}
                />
            </TabStyle>
        })}
    </Tabs>
)
}

TestComponent.spec.js
======================

import React from 'react';
import { expect } from 'chai';
import { shallow  } from 'enzyme';
import { spy } from 'sinon';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import {fromJS} from 'immutable'; 
import { TabStyle } from "../Styled";
import TestCompoent from './index';
const value = 1;
const dataMap = fromJS([{
    "a" : 1,
    "b" : "a1"
},
{
    "a" : 2,
    "b": "b2"
},
{
    "a" : 3,
    "b" : "a3"
},
{
    "a" : 4,
    "b" : "b4"
},
]);

let handleChange;
describe('TestComponent component ', () => {
beforeEach(() => {
    handleChange = spy();
});
it("renders Tabs", ()=> { //this is working
    const component = shallow(<TestComponent value={value} dataMap=
    {dataHeader} handleChange={handleChange}/>);
    expect(component.find(Tabs)).to.have.lengthOf(1);
    expect(component.find(Tabs).prop('value')).to.equal(value);
    expect(component.find(Tabs).prop('textColor')).to.equal("primary");
    expect(component.find(Tabs).prop('indicatorColor')).to.equal("primary");
});

it("renders Tab Style", ()=> { //not working
    const component = shallow(<TestComponent value={value} dataHeader=
       {dataHeader} handleChange={handleChange}/>);
    for (let i = 0; i < 4; i += 1) {
      **//Not sure how to write test case for TabStyle..**
      //  expect(component.find(TabStyle)).to.have.lengthOf(4)
    }
});

});