Question

如何在Vuejs + Jest测试中获取html元素的样式属性？

使用jest和@vue/test-utils测试textarea元素是否在Vuejs中应用了color内联样式。

我已经在文本区域上设置了ref，并且检查文本区域是否存在及其值的测试成功了，但是未能从元素的样式中获得color属性。

下面是我的组件和测试代码：

<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
    });
});

我也尝试过textarea.element.style.color，但还是一样。

测试结果：

Expected: "color"
Received: ""

那我该如何获取textarea元素的color？

Answer 1

之所以会发生这种情况，是因为测试设置的颜色值无效（即"color"对于color样式而言不是有效值），因此该设置被静默拒绝。

要解决此问题，请选择有效的color值之一（例如"red"或"#090"）。

Vue Jest测试元素的内联样式

1 个答案: