Javascript 单元测试a反应组分-jest、酶

我正在对react组件进行单元测试。一个组件导入另一个组件并使用其道具。以下是jsx文件：

class First extends React.PureComponent {
    render() {
        const { name, isSelected, onClick } = this.props;
        const activeClass = isSelected ? styles.active : '';
        return (
            <div
                className={`${styles.first} ${activeClass}`}
                role="button"
                tabIndex={0}
                onClick={() => onClick(name)}
            >
                {name}
            </div>
        );
    }
}

First.propTypes = {
    name: PropTypes.string.isRequired,
    isSelected: PropTypes.bool,
    onClick: PropTypes.func,
};

export default First;

类首先扩展React.PureComponent{
render（）{
const{name，isSelected，onClick}=this.props；
常量activeClass=isSelected？styles.active:“”；
返回(
onClick（名称）}
>
{name}
);
}
}
First.propTypes={
名称：PropTypes.string.isRequired，
isSelected:PropTypes.bool，
onClick:PropTypes.func，
};
首先导出默认值；

这是我的第二个导入该类的类： 我

mport First from'../First/First'；
常量秒=（{values，passedVal，onClick}）=>{
const second=values.map（vlaue=>
,
);
返回(
{Second}
);
};
第二种类型={
值：PropTypes.arrayOf（PropTypes.string），
passedVal:PropTypes.string，
onClick:PropTypes.func，
};
导出默认过滤器列表；

这是我的测验。我想在我的测试中测试isSelected条件：

describe('Second - Unit test', () => {
    let props;
    let secondComponent;

    const second = () => {
        if (!secondComponent) {
            secondComponent = shallow(<Second {...props} />);
        }
        return secondComponent;
    };
      beforeEach(() => {
        props = Second.defaultProps;
        secondComponent = undefined;
    });

   it('verify value of isSelected ', () => {
             props.passedVal='value01';
             props.value=['value01'];
            console.log(props.isSelected);
           });

description（'Second-unittest'，（）=>{
让道具；
让第二组分；
常数秒=（）=>{
如果（！secondComponent）{
第二个组件=浅（）；
}
返回第二个组件；
};
在每个之前（（）=>{
props=Second.defaultProps；
第二个组件=未定义；
});
它（'验证isSelected的值'，（）=>{
props.passedVal='value01'；
props.value=['value01']；
console.log（props.isSelected）；
});

---

它给了我未定义的属性，因为这是第一类的属性。我如何在这里验证此逻辑。需要先创建实例，然后进行检查？

属性。isSelected

将未定义，因为您没有向它传递任何值，并且它没有默认属性

我认为不是：

props.passedVal='value01';
props.value=['value01'];

您将要使用：

secondComponent.setProps({
  passedVal: 'value01',
  values: ['value01']
});

请注意，在您的测试中，组件已经安装，因此将新值分配给props对象实际上不会影响组件。不过，使用Ezyme的

setProps

将不会影响组件。您可以阅读更多相关内容：

---

此外，

isSelected

是

First

组件的一个属性，因此请注意，当您尝试在测试中检查它的值时。

使用

shall

将测试作为一个单元在组件上执行，并且不会间接断言子组件的行为。但是，您可以检查ch的属性使用

查找
的ild组件，示例（未测试）：

const wrapper=shallow（）；
expect（wrapper.find（Second.first（）.prop（'isSelected'））.to.equal（'yourValue'）；
我在上面尝试过，它给了我错误“无法读取未定义的属性'setProps'。您确定要调用呈现组件的
第二个
函数吗？是的，我可以设置属性。我使用console.log（）进行了验证。我在测试isSelected道具时面临问题。我如何称呼它？它是一流的道具？我能不能在这里测试它？如果我得到正确答案，组件呈现为活动时应该在那里。我尝试使用：const isActive=second component.find（'div'）；expect（isActive）.toEqual（true）；但它失败了。我建议在本例中使用Ezyme的
mount
函数，而不是
shallow
，因为它还将呈现
第一个
组件。然后，在设置道具后，您可以查询
第一个
组件并检查其道具，例如：
secondComponent.find（First）.prop（'isSelected'））
secondComponent.setProps({
  passedVal: 'value01',
  values: ['value01']
});

const wrapper = shallow(<First/>);
expect(wrapper.find(Second).first().prop('isSelected')).to.equal('yourValue');