I want to test if ponent's setter throws a custom error when trying to assign an invalid value. I think problem is that it doesn't even call a setter it is behaving like it just creates/assigns to normal property in the object. But it returns default sortData. Thanks for the help!

Edit: here is described Vue ponent prop with getters and setters, which is exactly what I'm doing

Code in the ponent:

// 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...

Test case:

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...

I want to test if ponent's setter throws a custom error when trying to assign an invalid value. I think problem is that it doesn't even call a setter it is behaving like it just creates/assigns to normal property in the object. But it returns default sortData. Thanks for the help!

Edit: here is described Vue ponent prop with getters and setters, which is exactly what I'm doing

Code in the ponent:

// 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...

Test case:

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...

• javascript
• unit-testing
• vue.js
• jestjs

• Is the problem specific to testing in Jest? If you instantiate your ponent in a regular browser window and try to set the invalid value, do you get the expected error thrown? – Roy J Commented Jan 16, 2018 at 15:00
• Yes, if I try to assign an invalid value from a select field it throws the correct error. – Mikeee Commented Jan 16, 2018 at 15:53

1 Answer 1

You need to do sortPanel.setData({sort: 'anything'}). Your setter will be correctly called.

Documentation for setData (from vue-test-utils)