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

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

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

...

当我写测试时，它失败了。我需要将道具传递到浅渲染组件。所以我在同一个目录下传递不同的值。这不起作用，我一直收到一个错误TypeError:\u 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)
})

让setStartDateSpy、setEndDateSpy、setTextFilterSpy、sortByDateSpy、sortByAmountSpy、FilterStore、包装器
在每个之前（（）=>{
setStartDateSpy={setStartDate:jest.fn（）}
setEndDateSpy={setEndDate:jest.fn（）}
setTextFilterSpy={setTextFilter:jest.fn（）}
FiltersStore={FiltersStore:{filters:filters}}
包装纸=浅(
)
})
测试（'应处理文本更改'，（）=>{
常量值='租金'
wrapper.find（'input'）。位于（0）。simulate（'change'）{
目标：{value}
})
expect（setTextFilterSpy）.toHaveBeenLastCalledWith（value）
})

组件似乎希望

过滤器动作

是一个值为函数的对象

在应用程序代码中，您可以将其视为使用访问

FiltersActions

prop，并将其作为函数执行。例如，

this.props.filterAction.setEndDate（endDate）

要将道具作为对象传递，需要使用大括号再次将其包裹。因此，在测试中，尝试将FiltersAction作为对象传递，如下所示：

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

wrapper=shall(
)

请注意，在您的示例中，您是：

不要用花括号双重包装对象

使用计算的属性键创建对象文字。也就是说，当您没有显式地提供属性名时，结果对象将基于变量名创建属性名。因此，您生成的对象没有包含应用程序代码所期望的属性，并且试图将

未定义的

作为函数调用

---

谢谢你，乔丹。我也试过了。我得到了同样的错误，因为我只能按照我在示例中设置道具的方式来设置道具。嗯-你能尝试将

FiltersAction

作为对象传递吗，比如`FiltersAction={{{setTextFilter:setTextFilterSpy，}}}等等？天哪，这很有效。有点像这样重新排列它，setTextFilterSpy=jest.fn（），`FiltersAction={{{setTextFilter:setTextFilterSpy，…}}}，但重要的部分是将它全部放在对象中。你能回答这个问题并详细解释一下吗？这样我就可以接受你的回答。谢谢你的帮助。