react enzyme simulate change

1// app.js
2import React from 'react'
3
4const App = (props) => {
5  return (
6    <>
7      <input type='text' name='username' value={props.username} onChange={props.onChange} />
8      <input type='email' name='email' value={props.email} onChange={props.onChange} />
9    </>
10  )
11}
12
13export default App
14
15// App.test
16import React from 'react'
17import { shallow } from 'enzyme'
18import App from './App'
19
20it('change value', () => {
21  const state = { username: 'joe', email: 'johndoe13@gmail.com' }
22
23  const props = {
24    username: state.username,
25    email: state.email,
26    onChange: (e) => {
27      state[e.target.name] = e.target.value
28    }
29  }
30
31  const wrapper = shallow(<App {...props} />)
32
33  expect(wrapper.find('input').at(0).prop('value')).toEqual('joe')
34  expect(wrapper.find('input').at(1).prop('value')).toEqual('johndoe13@gmail.com')
35
36  wrapper
37    .find('input')
38    .at(0)
39    .simulate('change', { target: { name: 'username', value: 'john doe' } })
40  expect(state.username).toEqual('john doe')
41
42  wrapper
43    .find('input')
44    .at(1)
45    .simulate('change', { target: { name: 'email', value: 'janedoe13@gmail.com' } })
46  expect(state.email).toEqual('janedoe13@gmail.com')
47
48  console.log(wrapper.debug())
49})
50