Is there a way to retrieve the style property of an HTML element using Vuejs and Jest testing?
I am utilizing jest and @vue/test-utils to verify if a textarea element in Vuejs has the inline style attribute color applied.
Although I have successfully set up a ref on the textarea and confirmed its existence and value through tests, I encountered difficulties in retrieving the color property from the element's style.
The code snippets below demonstrate my component setup and test scenario:
<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 attempted accessing the color property with textarea.element.style.color, but faced the same issue.
The test outcome is as follows:
Expected: "color"
Received: ""Any suggestions on how to access the color property of the textarea element?