Reference a computed property in a jest unit test

user_1393225 0
Viewed 65

I'm writing a jest unit test for my Vuejs 2 (Vuetify) component. Setup is pretty simple.

Inside the component I have a prop, which is an object with nested fields:

props: ['testObject']

And I have a computed property that returns a field from that prop:

computed: {
    myField() {
      return this.testObject.testField;
    }
}

And I write a Jest test:

wrapper = mount(MyComponent, {
            mocks: {
                propsData: {
                    testObject: { testField: 'My Test Value' }
                }
            },
        });

it("should return a test field", () => {
    const field = wrapper.vm.$options.computed.myField();
    expect(field).toBe('My Test Value');
});

When I run the test I get the following:

TypeError: Cannot read property 'testField' of undefined

So it calls computed propperty, but testObject is undefined.

Any idea what's going on?

@vue/test-utils: 1.3.0 @vue/vue2-jest: 28.0.1 @types/jest: 28.1.3 jest: 28.1.1

ts-jest vue-test-utils vuejs2 vue.js jestjs
3 Answers

Your code failing because the this inside the computed function referencing $options. You need to access computed as a vm's attribute, not the $option. Just do this.

expect(wrapper.vm.myField).toBe('My Test Value');

But there is one more problem here. Actually you don't need to test the computed value. Because if you accidentally remove this computed value rendering from template, this tests will still be passed. Instead, test what this string is rendered in html.


expect(wrapper.text()).toContain('My Test Value');
user_14201590

Try to mount your component this way:

wrapper = mount(MyComponent, {
        propsData: {
            testObject: { testField: 'My Test Value' }
        }
    });

Check this documentation for more informations.

user_150951040

Alright, I worked it out by doing this:

it("should return a test field", async () => {
   wrapper.vm.$options.computed.testObject.call({ testField: 'My Test Value' });
   ...
});

Hope that will help for those who experience the same issue.

user_13932250
Related