7

I'd like to test a Vue.js component, and I'm failing at that. Simply put, I'm setting a component property, and I want to assert that it is set correctly. If that matters, the module is loaded with exports, and the JS is output using Webpack.

// component
exports = module.exports = {};

module.exports = {
  data: function () {
    return {
      active: false
    };
  },
  methods: {
    'close': function () {
       console.log(this.active); // -> true
       this.active = false;
       console.log(this.active); // -> false
    }
  }
};

// component-test
var modal = require('../../resources/src/js/components/_component.js');
var assert = require('assert');

describe('close()', function () {
  beforeEach(function () {
    modal.data.active = true;
  });
  it('should set modal to inactive', function () {
    console.log(modal.data.active); // -> true
    modal.methods.close();
    console.log(modal.data.active); // -> true
    assert.equal(modal.data.active, false);
  });
});
2
  • so what is actually failing? what's the output of your tests? have you check the vue js guide about testing? Feb 9, 2016 at 11:53
  • also check the webpack example on github, there are some test defined there, with karma + jasmine + phantomjs Feb 9, 2016 at 11:57

2 Answers 2

6

This should give you a hint on how to load vue components when testing;

var modalComponent = require('../../resources/src/js/components/_component.js');
var assert = require('assert');         

 //load the component with a vue instance
vm = new Vue({
    template: '<div><test v-ref:test-component></test></div>',
    components: {
        'test': modalComponent
    }
}).$mount();

var modal = vm.$refs.testComponent;

describe('close()', function () {
    beforeEach(function () {
        modal.active = true;
    });

    it('should set modal to inactive', function () {
        console.log(modal.active); // -> true
        modal.close();
        console.log(modal.active); // -> false
        assert.equal(modal.active, false);
    });
});
1
  • for some reason, running methods like this makes PhantomJS timeout. PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 4 DISCONNECTED (10.003 secs / 0 secs) Jun 30, 2016 at 3:14
0

https://github.com/eddyerburgh/avoriaz is now the official testing library for Vue.js checkout the documentation on getting setup to make assertions on your components https://eddyerburgh.gitbooks.io/avoriaz/content/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.