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

我是单元测试反应组件。一个组件导入其他组件并使用其道具。这里有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;

这里是我的测试。我想测试在我的测试中选择的条件：

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

它给了我未定义，因为这是第一类的道具。我如何在这里验证这个逻辑。需要先制作实例然后检查？

来源

2017-10-12 TesterGG

props.isSelected将会是未定义的，因为您不会传递任何值，并且它没有默认的道具。

我认为不是：

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

你需要使用：

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

请注意，在您的测试，组件已安装，因此分配给新的价值观道具对象实际上不会影响组件。尽管使用酶的setProps。你可以阅读一些有关这个：https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/setProps.md

此外，isSelected是First成分的道具，所以请注意，当您试图在测试，以检查它的价值。

来源

2017-10-12 05:15:38

我上面试过了，它给了我错误“无法读取属性‘setProps’未定义”。 – TesterGG

你确定调用渲染组件的'second'函数吗？ –

是的，我可以设置属性。我使用console.log（）进行了验证。我在测试中面临的问题是选择道具。我怎么称呼它？它的第一堂课的道具？我可以不在这里测试吗？如果我得到正确，组件呈现isActive应该在那里。我尝试使用：const isActive = secondComponent.find（'div'）;期待（isActive）.toEqual（真）;但失败了。 – TesterGG

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

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

来源

2017-10-12 07:15:42 GibboK

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

回答

相关问题