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 component 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 '~/components/Posts/Includes/QuestionCard';
import { FeedPost } from '~/classes/FeedPost';
export default {
name: 'SingleItemPost',
components: {
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?