mardi 28 novembre 2017

Passing more values under same prop name and test it with Jest

I am using Jest and Enzyme to test my React-Mobx app. I have come to a problem where I am accessing different values under the same prop name. As you can see I am accessing different properties under the same FilterssAction prop name.

@inject('RootStore', 'FiltersAction')
@observer
class ExpenseListFilters extends Component {
  state = {
    calendarFocused: null
  }

  onDatesChange = ({startDate, endDate}) => {
    this.props.FiltersAction.setStartDate(startDate)
    this.props.FiltersAction.setEndDate(endDate)
  }

  onTextChange = (e) => {
    this.props.FiltersAction.setTextFilter(e.target.value)
  }

...

When I write my test it fails. I need to pass props to shallow rendered component. So I am passing different values under same. This is not working, I keep getting an error TypeError: _this.props.FiltersAction.setTextFilter is not a function How do I test this?

let setStartDateSpy, setEndDateSpy, setTextFilterSpy, sortByDateSpy, sortByAmountSpy, FiltersStore, wrapper

beforeEach(() => {
  setStartDateSpy = {setStartDate: jest.fn()}
  setEndDateSpy = {setEndDate: jest.fn()}
  setTextFilterSpy = {setTextFilter: jest.fn()}

  FiltersStore = {FiltersStore: {filters: filters}}

  wrapper = shallow(
    <ExpenseListFilters.wrappedComponent 
      FiltersAction = { 
        setStartDateSpy,
        setEndDateSpy,
        setTextFilterSpy
      }
      RootStore = {FiltersStore}
    />
  )
})

test('should handle text change', () => {
  const value = 'rent'
  wrapper.find('input').at(0).simulate('change', {
    target: {value}
  })
  expect(setTextFilterSpy).toHaveBeenLastCalledWith(value)
})

Aucun commentaire:

Enregistrer un commentaire