#javascript #reactjs #unit-testing #jestjs
Вопрос:
Это компонент react, который я пытаюсь использовать для модульного тестирования react-dom/test-utils
import React from 'react'
import DatePicker from '../../../../../client/src/components/DatePicker.jsx'
import { Input } from '../../../../../client/src/forms/components.js'
import Select from 'react-select'
export class ListFilter extends React.PureComponent {
render() {
const { users, filters, filterHandler, filterSubmitHandler } = this.props
return (
<div className='filter row'>
<div className='col-lg-3 pb-1 pr-lg-1'>
<Select
labelKey='user'
name='select-user'
onChange={e => filterHandler('userId', e)}
options={programs}
placeholder='Filter by User...'
simpleValue
value={filters['userId'] amp;amp; parseInt(filters['userId'])}
valueKey='id'
disabled={false}
/>
</div>
<div className='col-lg-3 pb-1 pr-lg-1'>
<DatePicker
className='form-control'
onChange={e => filterHandler('createdAt', e)}
value={filters['createdAt']}
placeholder={'Filter by Date...'}
/>
</div>
<div className='col-lg-3 pb-1 pr-lg-1'>
<Input
className='form-control mb-1 mr-md-1'
key={'role'}
name={'role'}
onChange={e => filterHandler('role', e)}
placeholder={'Search by Role...'}
value={filters['role']}
/>
</div>
<div className='col-lg-1.5 pb-1 pr-lg-1'>
<button
className='btn btn-primary form-control mb-1'
type='submit'
onClick={filterSubmitHandler}
>
<i className='fa fa-search' /> Search
</button>
</div>
</div>
)
}
}
Вот код модульного тестирования, с которого я начал и не знаю, как продолжить.
jest.unmock('../ListFilter.jsx')
import { ListFilter } from '../ListFilter.jsx'
import React from 'react'
import ReactDOM from 'react-dom'
import Select from 'react-select'
import TestUtils, { Simulate } from 'react-dom/test-utils'
describe('ListFilter', () => {
let props
beforeEach(() => {
props = {
filters: {
createdAt: null,
order: 'event,desc',
page: 1,
userId: '',
role: ''
},
users: [
{
id: 573,
name: 'Gokul',
},
{
id: 993,
name: 'Vimal'
},
{
id: 93,
name: 'Bimal'
}
]
}
})
let component, onChange, filterHandler, filterSubmitHandler, node
function render() {
filterHandler = jest.fn()
filterSubmitHandler = jest.fn()
}
describe('onChange', () => {
beforeEach(render)
it('should call onChange when user changes', () => {
const container = document.createElement('div')
ReactDOM.render(
<ListFilter
{...props}
filterHandler={filterHandler}
filterSubmitHandler={filterSubmitHandler}
/>,
container
)
container.querySelector('select').simulate('change')
expect(container.querySelector('select').text()).toEqual('Gokul')
})
})
})
Can anyone please help me out to perform the full unit testing of the above component. Many thanks in advance.