Блог

Это компонент 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.