时间戳

首页 > 解决方案 > 测试函数返回不同的案例场景 - Jest 酶

reactjs - 测试函数返回不同的案例场景 - Jest 酶

问题描述

尝试运行测试并且我的函数没有根据我的情况返回我所期望的。不确定我是否正确应用条件

这是功能： 

renderColumnDropdown = () => {
  if (this.props.columnIdList != undefined) {
  let columnOptions = Object.keys(this.props.columnIdList).map(key => {
  switch (key) {
    case 'sort':
      return false
    case 'filters':
      return false
    })
   return (
    default:
    return (
      <option value={key} key={key}>{this.props.columnIdList[key]}</option>
    )
  return (
   <select value={this.state.column} name='column' id='filter-column' onChange={this.handleChange} defaultValue={this.props.defaultData != null ? this.props.defaultData.column : 'default'}>
    {columnOptions}
  </select>
)

到目前为止，这是我的测试：使用 jest 和酶 for React JS

it('Test renderColumnDropdown method',() => {
    wrapper.setProps({
        columnIdList:[],
        columnOptions:[{
            case:'sort'
         }]   
     })
     wrapper.update();
     expect(wrapper.instance().renderColumnDropdown({columnOptions:[{case:""}]})).toEqual();
});

我希望返回一条消息，说等于 false，但现在正在返回“

什么可以调整我的道具以确保我可以测试每个案例场景

标签： reactjsjestjs

解决方案

renderColumnDropdown迭代columnIdListprop，而不是columnOptions.

它可能应该是：

wrapper.setProps({
    columnIdList:[{
        case:'sort'
     }]   
 })

它也不接受像这样的论点renderColumnDropdown({columnOptions:[{case:""}]})

该函数返回 React 元素，它们可以被渲染：

const columnsWrapper = shallow(wrapper.instance().renderColumnDropdown());

然后可以断言包装器是否期望选项：

expect(columnsWrapper.find('select').dive().find('option')).to.have.lengthOf(0);

推荐阅读