单元测试一个反应组件 - 笑话，酶答案

【问题标题】：unit test a react component- jest, enzyme单元测试一个反应组件 - 笑话，酶
【发布时间】：2018-03-23 22:04:45
【问题描述】：

我正在单元测试反应组件。一个组件导入另一个组件并使用它的道具。这里是 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;

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

mport First from '../First/First';

const Second = ({ values, passedVal, onClick }) => {
    const second = values.map(vlaue =>
        <First
            key={value}
            name={value}
            isSelected={value === passedVal}
            onClick={onClick}
        />,
    );

    return (
        <div >
            {Second}
        </div>
    );
};

Second.propTypes = {
    values: PropTypes.arrayOf(PropTypes.string),
    passedVal: PropTypes.string,
    onClick: PropTypes.func,
};

export default FilterList;

这是我的测试。我想在我的测试中测试 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);
           });

它给了我未定义，因为这是头等舱的道具。我如何在这里验证这个逻辑。需要先创建实例再检查？

【问题讨论】：

标签： javascript reactjs enzyme jestjs

【解决方案1】：

props.isSelected 将是未定义的，因为您没有向它传递任何值，并且它没有默认属性。

我认为不是：

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

你会想要使用：

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

请注意，在您的测试中，组件已经挂载，因此为 props 对象分配新值实际上不会影响组件。使用酶的setProps 会。您可以阅读更多相关信息：https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/setProps.md

此外，isSelected 是 First 组件的一个 prop，所以当您尝试在测试中检查它的值时请注意。

【讨论】：

我在上面试过了，它给了我错误“无法读取未定义的属性'setProps'”。
你确定调用了渲染组件的second函数吗？
是的，我可以设置属性。我使用 console.log() 进行了验证。我在测试 isSelected 道具时遇到问题。我怎么称呼它？它的头等舱道具？我不能在这里测试吗？如果我得到正确，当组件被渲染时 isActive 应该在那里。我尝试使用： const isActive= secondComponent.find('div');期望(isActive).toEqual(true);但它失败了。
我建议在这种情况下使用酶的mount 函数而不是shallow，因为它也会渲染First 组件。然后，设置好 props 后，您可以查询 First 组件并检查其 props，例如：secondComponent.find(First).prop('isSelected')

【解决方案2】：

文使用shallow测试是在组件上作为一个单元执行的，并不间接断言子组件的行为。但是，您可以使用 find 检查子组件的属性，例如（未测试）：

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

【讨论】：