Question

我是测试用例的新手。想为react的子标记编写测试用例愚蠢的组件，即TabStyle，它是在循环中创建的。下边是代码段。请帮助我对柴和酶有较深了解的人。谢谢！

用于Tabs的测试用例工作正常，想为TabStyle编写类似的示例子标签。

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

});

Answer 1

您可以按以下名称找到组件：

it("renders Tab Style", ()=> {
    const component = shallow(<TestComponent value={value} dataHeader=
       {dataHeader} handleChange={handleChange}/>);

    expect(component.find("TabStyle")).to.have.lengthOf(4);
});

测试反应组件中的循环条件

1 个答案: