How to test computed properties in Vue.js? Can't mock "data"

Question

I wonder how to test computed properties in Vue.js's unit tests.

I have create a new project via vue-cli (webpack based).

For example here are my Component:

<script>
  export default {
    data () {
      return {
        source: []
      }
    },
    methods: {
      removeDuplicates (arr) {
        return [...new Set(arr)]
      }
    },
    computed: {
      types () {
        return this.removeDuplicates(this.source))
      }
    }
  }
</script>

I've tried to test it like this

it('should remove duplicates from array', () => {
  const arr = [1, 2, 1, 2, 3]
  const result = FiltersList.computed.types()
  const expectedLength = 3

  expect(result).to.have.length(expectedLength)
})

---

QUESTION (two problems):

1. this.source is undefined. How to mock or set value to it? (FiltersList.data is a function);
2. Perhaps I don't wan't to call removeDuplicates method, but how to mock(stub) this call?

Answer 1

Okay. I've found a dumb solution. Dumb but works.

You have been warned =)

The idea: To use .call({}) to replace this inside that calls:

it('should remove duplicates from array', () => {
  const mockSource = {
     source: [1, 2, 1, 2, 3],
     getUniq (arr) {
       return FiltersList.methods.removeDuplicates(arr)
     }
  }

  const result = FiltersList.computed.types.call(mockSource)
  const expectedLength = 3

  expect(result).to.have.length(expectedLength)
})

So basically you can specify your own this with any kind of data. and call YourComponent.computed.foo.call(mockSource). Same for methods