How can I test computed properties in VueJS?

Question

I'm using VueJS from Vue CLI. So all my components are in .vue format.

In one of my components, I have an array called fields in the data section.

//Component.vue
data() {
  return {
     fields : [{"name" : "foo", "title" : "Foosteria"}, {"name" : "bar", "title" : "Barrista"}]
  }
}

I have a computed property that is a subset of fields

//Component.vue
computed : {
    subsetOfFields () {
       // Something else in component data determines this list
    }
}

I've set up all of my unit tests in jasmine like this and they work fine.

 //Component.spec.js
 import Vue from 'vue'
 import MyComponent from 'Component.vue'
 describe("Component test", function() {
      var myComponentVar = new Vue(MyComponent);
      var vm = myComponentVar.$mount();

      beforeEach(function() {
         vm = myComponentVar.$mount();
      );

      afterEach(function() {
         vm = myComponentVar.$destroy();
      });

      it("First spec tests something", function() {
            ...
       });

 });

For everything else, doing something inside the spec, then running assertions on the data objects works just fine. However, running an assertion on subsetOfFields always returns an empty array. Why so? What should I do, in order to be able to test it?

FYI, I even tried nesting the spec inside another describe block and then adding a beforeEach which initializes the fields array. It did not work.

However, initializing fields inside the generic beforeEach function worked. But I don't want to initialize the fields array with that mock data for the other specs.

This is the component.spec.js for the actual Vue project. You can find what you need in there likely. github.com/vuejs/vue/blob/dev/test/unit/features/options/… — Bert
– Bert, Commented Apr 3, 2017 at 18:09
@BertEvans, I already tried the technique in that example. He's initializing the component with the data already in it. However in line 18 , the data for a changes from 1 to 2 and the change is expected in b in line 19. I did the same thing but it's not working and I can't figure out why. — Divyanth Jayaraj
– Divyanth Jayaraj, Commented Apr 3, 2017 at 20:32

jasonandmonte · Accepted Answer · 2021-03-12 18:35:16Z

3

I came across this link that talks about testing and the section you'll need to look at is the Vue.nextTick(...) section

https://alligator.io/vuejs/unit-testing-karma-mocha/

The block I'm talking about is below:

import Vue from 'vue';
// The path is relative to the project root.
import TestMe2 from 'src/components/TestMe2';

describe('TestMe2.vue', () => {
  ...
  it(`should update when dataText is changed.`, done => {
    const Constructor = Vue.extend(TestMe2);

    const comp = new Constructor().$mount();

    comp.dataProp = 'New Text';

    Vue.nextTick(() => {
      expect(comp.$el.textContent)
        .to.equal('New Text');
      // Since we're doing this asynchronously, we need to call done() to tell Mocha that we've finished the test.
      done();
    });
  });
});

edited Mar 12, 2021 at 18:35

jasonandmonte

2,0382 gold badges18 silver badges26 bronze badges

answered May 24, 2017 at 0:39

JoeManFoo

3593 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thewaywewere Over a year ago

Please read this how-to-answer for providing quality answer.

Collectives™ on Stack Overflow

How can I test computed properties in VueJS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related