How to get a style property of an html element in Vuejs + Jest test?

Using jest and @vue/test-utils to test if a textarea element has color inline style applied in Vuejs.

I have set ref on the textarea and the tests for checking the textarea existance and its value were successful but failed to get the color property from the style of the element.

Below is my ponent and test code:

<template>
    <Post :post="post">
        <QuestionCard ref="questioncard" :background="post.background">
            <textarea
                ref="posttext"
                :style="{ color: post.color }"
                class="text-center"
                v-model="post.text"
                disabled
            />
        </QuestionCard>
    </Post>
</template>

<script>
import Post from './Includes/Post';
import QuestionCard from '~/ponents/Posts/Includes/QuestionCard';
import { FeedPost } from '~/classes/FeedPost';

export default {
    name: 'SingleItemPost',
    ponents: {
        Post,
        QuestionCard,
    },
    props: {
        post: {
            type: FeedPost,
            required: true,
        },
    },
};
</script>

import { Wrapper, shallowMount } from '@vue/test-utils';
import QuestionPost from '../QuestionPost.vue';
import { FeedPost } from '~/classes/FeedPost';

Wrapper.prototype.ref = function (id) {
    return this.find({ ref: id });
};

describe('QuestionPost', () => {
    let wrapper;
    let post;
    const text = 'text';
    const color = 'color';

    beforeEach(() => {
        post = new FeedPost({
            text,
            color,
            type: 'questionPost',
        });
        wrapper = shallowMount(QuestionPost, {
            propsData: {
                post,
            },
        });
    });

    it('should render correct elements', () => {
        expect(wrapper.ref('questioncard').exists()).toBe(true); // OK
        expect(wrapper.ref('posttext').exists()).toBe(true); // OK
    });

    it('should have correct value and style', () => {
        const textarea = wrapper.ref('posttext');
        expect(textarea.element.value).toBe(text); // OK
        expect(textarea.element.style.getPropertyValue('color')).toBe(color); // failed
    });
});

I tried it with textarea.element.style.color as well, but same.

The test result:

Expected: "color"
Received: ""

So how can I get the color of the textarea element?

How to get a style property of an html element in Vuejs + Jest test?

Using jest and @vue/test-utils to test if a textarea element has color inline style applied in Vuejs.

I have set ref on the textarea and the tests for checking the textarea existance and its value were successful but failed to get the color property from the style of the element.

Below is my ponent and test code:

<template>
    <Post :post="post">
        <QuestionCard ref="questioncard" :background="post.background">
            <textarea
                ref="posttext"
                :style="{ color: post.color }"
                class="text-center"
                v-model="post.text"
                disabled
            />
        </QuestionCard>
    </Post>
</template>

<script>
import Post from './Includes/Post';
import QuestionCard from '~/ponents/Posts/Includes/QuestionCard';
import { FeedPost } from '~/classes/FeedPost';

export default {
    name: 'SingleItemPost',
    ponents: {
        Post,
        QuestionCard,
    },
    props: {
        post: {
            type: FeedPost,
            required: true,
        },
    },
};
</script>

import { Wrapper, shallowMount } from '@vue/test-utils';
import QuestionPost from '../QuestionPost.vue';
import { FeedPost } from '~/classes/FeedPost';

Wrapper.prototype.ref = function (id) {
    return this.find({ ref: id });
};

describe('QuestionPost', () => {
    let wrapper;
    let post;
    const text = 'text';
    const color = 'color';

    beforeEach(() => {
        post = new FeedPost({
            text,
            color,
            type: 'questionPost',
        });
        wrapper = shallowMount(QuestionPost, {
            propsData: {
                post,
            },
        });
    });

    it('should render correct elements', () => {
        expect(wrapper.ref('questioncard').exists()).toBe(true); // OK
        expect(wrapper.ref('posttext').exists()).toBe(true); // OK
    });

    it('should have correct value and style', () => {
        const textarea = wrapper.ref('posttext');
        expect(textarea.element.value).toBe(text); // OK
        expect(textarea.element.style.getPropertyValue('color')).toBe(color); // failed
    });
});

I tried it with textarea.element.style.color as well, but same.

The test result:

Expected: "color"
Received: ""

So how can I get the color of the textarea element?

• javascript
• vue.js
• jestjs
• vue-test-utils

1 Answer 1

This occurs because the test is setting in invalid color value (i.e., "color" is not a valid value for the color style), so the setting is silently rejected.

To resolve the issue, choose one of the valid color values (e.g., "red" or "#090").