2018年11月12日

Jest + enzyme でイベントをシュミレート

Jest + enzyme でイベントをシュミレートをする際によく書く記述をまとめてみました。

describe('コンポーネントのテスト', () => {

it('関数実行されているか', () => {
const mockFun = jest.fn()

const wrapper = shallow(
<MyComonent onChange={mockFun}/>
)

wrapper.find('button').simulate('click');

expect(mockFun).toHaveBeenCalled();

})

it('関数2回実行されているか', () => {
const mockFun = jest.fn()

const wrapper = shallow(
<MyComonent onChange={mockFun}/>
)

wrapper.find('button').simulate('click');

wrapper.find('button').simulate('click');
expect(mockFun)toHaveBeenCalledTimes(2)
})

it('Stateが変わっているか', () => {
const wrapper = shallow(
<MyComonent onChange={mockFun}/>
)

wrapper.find('button').simulate('click');

expect(wrapper.state('clicked')).toBe(true)

})

it('イベントオブジェクトをシュミレート', () => {
const myText = 'dummy text'

const wrapper = shallow(
<MyComonent onChange={mockFun}/>
)

wrapper.find('input').simulate('change',{
currentTarget: {
value: myText
}
});

expect(wrapper.state('text')).toBe(myText)

})

it('関数が特定の引数で実行されているか, () => {
const myText = 'dummy text'

const wrapper = shallow(
<MyComonent onChange={mockFun}/>
)

wrapper.find('input').simulate('change',{
currentTarget: {
value: myText
}
});

expect(wrapper).toHaveBeenCalledWith({
text:myText
})

})

})
タグ:REACT jest ENZYME
posted by ねこまんま at 15:31 | test | 更新情報をチェックする