反應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() 
    }) 
})