Question

我正在使用Jest和Enzyme来测试我的React-Mobx应用程序。我遇到了一个问题，我在相同的道具名称下访问不同的值。如您所见，我在相同的FilterssAction道具名称下访问不同的属性。

@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)
  }

...

当我写测试时，它失败了。我需要将props传递给浅层渲染组件。所以我在同一时间传递不同的值。这不起作用，我不断收到错误TypeError：_this.props.FiltersAction.setTextFilter不是函数我该如何测试？

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)
})

在相同的道具名称下传递更多值并使用Jest进行测试

0 个答案: