反应js测试布尔支柱与Jest

Question

新的测试，所以不是我敢肯定如何处理这个。我的组件中有一个bool prop，它决定了元素的className。布尔被设定的形式是否是有效或不显示的div包含错误消息

<div> 
    <div className={!this.props.isValid ? 'login__error error' : 'hidden'}> 
     ... 
    </div> 
</div> 

如何开玩笑测试此？

在此先感谢

UPDATE： 继@ hemerson - 卡林的答案，这里是我的测试。但不能确定为什么RangeError: Invalid string length不合格。

describe('Given invalid details the form should display an error',() => { 
    let component 

    beforeEach(() => { 
    component = mount(<Login />) 
    }) 

    it('should render valid mode',() => { 
    component.setProps({ isValid: true }) 
    console.log(component.props()) 

    expect(component).toMatchSnapshot() 
    }) 

    it('should render invalid mode',() => { 
    component.setProps({ isValid: false }) 
    console.log(component.props()) 

    expect(component).toMatchSnapshot() 
    }) 

}) 

Answer 1

找到在最后一个方式，比我想象的简单。

test('Given invalid details the form should display an error',() => { 

    const login = mount(<Login isValid={false}/>); 
    expect(login.find('.error').hasClass('login__error')).toBeTruthy(); 

}) 

test('Given valid details the form should not display an error',() => { 

    const login = mount(<Login isValid={true}/>); 
    expect(login.find('.error').hasClass('hidden')).toBeTruthy(); 

}) 

希望它可以帮助

Answer 2

这两种情况下使用快照测试：

describe('YourComponent test',() => { 
    let component 

    beforeEach(() => { 
    component = mount(<YourComponent />) 
    }) 

    it('should render valid mode',() => { 
    component.setProps({ isValid: true }) 
    expect(component).toMatchSnapshot() 
    }) 

    it('should render invalid mode',() => { 
    component.setProps({ isValid: false }) 
    expect(component).toMatchSnapshot() 
    }) 
})