如何通过 Jest 测试 Vue 组件的计算属性设置器

Question

我想测试组件的设置器在尝试分配无效值时是否抛出自定义错误。我认为问题是它甚至不调用设置器，它的行为就像它只是创建/分配给对象中的普通属性一样。但它返回默认的 sortData。谢谢您的帮助！

编辑：这里描述了带有 getter 和 setter 的 Vue 组件 prop，这正是我正在做的

组件中的代码：

// Vue Component...
sort: {
  /**
   * Getter.
   * */
  get() {
    // Storing data from data().
    return this.sortData
  },

  /**
   * Setter.
   * */
  set(value) {
    if (value === 'none' || value === 'by-date' || value === 'by-ratings') {
      this.sortData = value
      this.$emit('sortChange', value)

    } else {
      // I want to test this error throwing.
      throw new EnumError('(Component::SortPanel): Sort property is of type Enum. ' +
        'It excepts either none, by-date or by-ratings values.')

    }
  }
},
// Vue Component...

测试用例：

beforeEach(function() {
  // Component for testing is inited by shallow function from vue-test-utils package.
  sortPanel = shallow(SortPanel)
})
// Other tests...
it('should have property sort', function() {
  expect(sortPanel.vm.sort).toBe('none')

  // Should be either none, by-date or by-ratings.
  expect(() => {
    sortPanel.vm.sort = 'anything'
  }).toThrow(EnumError)
})
// Other tests...

Answer 1

你需要做的sortPanel.setData({sort: 'anything'})。您的 setter 将被正确调用。

setData 的文档（来自 vue-test-utils）