react enzye event test
// app.js
import React from 'react'
const App = (props) => {
return (
<>
<input type='text' name='username' value={props.username} onChange={props.onChange} />
<input type='email' name='email' value={props.email} onChange={props.onChange} />
</>
)
}
export default App
// App.test
import React from 'react'
import { shallow } from 'enzyme'
import App from './App'
it('change value', () => {
const state = { username: 'joe', email: '[email protected]' }
const props = {
username: state.username,
email: state.email,
onChange: (e) => {
state[e.target.name] = e.target.value
}
}
const wrapper = shallow(<App {...props} />)
expect(wrapper.find('input').at(0).prop('value')).toEqual('joe')
expect(wrapper.find('input').at(1).prop('value')).toEqual('[email protected]')
wrapper
.find('input')
.at(0)
.simulate('change', { target: { name: 'username', value: 'john doe' } })
expect(state.username).toEqual('john doe')
wrapper
.find('input')
.at(1)
.simulate('change', { target: { name: 'email', value: '[email protected]' } })
expect(state.email).toEqual('[email protected]')
console.log(wrapper.debug())
})