How can I spy or mock methods in Vue with sinon?

2
votes

I'm trying to create a unit test for my app based in Vue and vue-cli with webpack template.

I read Vue documentation, vue-loader, vue-cli and vue-template/webpack (an more!). When I try to make a unit test for my component, I use this.

const Constructor = Vue.extend(MovieList)
vm = new Constructor({
    propsData: {
        criteria
    },
    methods: {
        fetch: sandbox.spy()
    }
}).$mount()

And test this:

expect(vm.fetch).to.be.called

But I get this error:

✗ should be called fetch

TypeError: { [Function: boundFn] _length: 0 } is not a spy or a call to a spy! at assertCanWorkWith (/home/jmanuelrosa/Developer/personales/vue-course/movues/node_modules/sinon-chai/lib/sinon-chai.js:43:19) at Assertion. (/home/jmanuelrosa/Developer/personales/vue-course/movues/node_modules/sinon-chai/lib/sinon-chai.js:70:13) at Assertion.addProperty (/home/jmanuelrosa/Developer/personales/vue-course/movues/node_modules/chai/chai.js:4240:29) at Context. (webpack:///test/unit/specs/MovieList.spec.js:74:39 <- index.js:14910:39)

1
vue.jsvuejs2

1 Answers

1
votes

Never worked with sinon but doc says:

sinon.spy(vm, "fetch");
expect(vm.fetch).toHaveBeenCalled();

http://sinonjs.org/releases/v2.1.0/spies/

Are you calling fetch upon component created? sometimes you need to manually trigger methods.